JS常见手写

防抖

防抖的原理

你尽管触发事件，但是我一定在事件触发 n 秒后才执行，如果你在一个事件触发的 n 秒内又触发了这个事件，那我就以新的事件的时间为准，n 秒后才执行，总之，就是要等你触发完事件 n 秒内不再触发事件，我才执行

应用

• input的联想
• 滚动页面回到顶部

代码

第一版：基础

function debounce(func, delay) {
  let timeout;
  return function () {
    clearTimeout(timeout);
    timeout = setTimeout(func, delay);
  };
}

第二版：优化，关于this、事件对象

function debounce(func, delay) {
  let timeout;
  return function () {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      func.apply(this,arguments);
    },delay);
  };
}

节流

原理

如果你持续触发事件，每隔一段时间，只执行一次事件。
实现方式：时间戳、定时器

应用

• 加载更多
• 鼠标不断点击触发事件

代码

时间戳

使用时间戳，当触发事件的时候，我们取出当前的时间戳，然后减去之前的时间戳(最一开始值设为 0 )，如果大于设置的时间周期，就执行函数，然后更新时间戳为当前的时间戳，如果小于，就不执行。

function throttle(func,delay){
  let previous=0
  return ()=>{
    let now = new Date()
    if(now - previous >delay){
      func.apply(this,arguments)
      previous=now
    }
  }
}

定时器

当触发事件的时候，我们设置一个定时器，再触发事件的时候，如果定时器存在，就不执行，直到定时器执行，然后执行函数，清空定时器，这样就可以设置下个定时器。

function throttle(func, delay) {
  let timeout;
  return () => {
    if (!timeout) {
      func.apply(this, arguments);
      timeout = setTimeout(() => {
        timeout = null;
      }, delay);
    }
  };
}