防抖节流

1. 什么情况下用防抖、节流？他们有什么区别？他们用到了什么js技术？你能快速手写一个防抖函数吗？

提示

防抖：在事件被触发n秒后再执行回调,如果在这n秒内事件又被触发,则重新计时。

节流：规定在一个单位时间内,只能触发一次函数。如果这个单位时间内触发多次,只有一次生效。

区别：总的来说,防抖是将多个事件合并为一个事件处理,而节流是限制一个时间段内事件的触发频率。两者都可以有效提高应用的性能。

使用到了js的闭包。

实现一个防抖函数

/**
 * @param func 需要防抖的函数
 * @param delay 延迟时间，单位为毫秒
 * @returns 返回一个具有防抖功能的函数
*/

const debounce = (func, delay) => {
  let timer = null;

  return (...args) => {
    
    if (timer) {clearTimeout(timer)};

    timer = setTimeout(() => {
      timer = null;
      func(...args);
    },delay);
  }
}

实现一个节流函数

const throttle = (fn, delay) => {
  let last = 0;

  return (...args) => {
    let now = new Date().getTime();
    if (now - last >= delay) {
      fn(...args);
      last = now;
    };
  }
}