防抖/节流 封装

防抖/节流

简单介绍

• 防抖：指定时间内 频繁触发一个事件，以最后一次触发为准
• 节流：指定时间内 频繁触发一个事件，只会触发一次

应用场景有很多比如:

防抖是： input搜索，用户在不断输入内容的时候，用防抖来减少请求的次数并且节约请求资源

节流：场景普遍就是按钮点击，一秒点击 10 下会发起 10 次请求，节流以后 1 秒点再多次，都只会触发一次

// 防抖
// fn 需要防抖的函数，delay 为定时器时间
function debounce(fn,delay){
    let timer =  null  // 用于保存定时器
    return function () { 
        // 如果timer存在 就清除定时器，重新计时
        if(timer){
            clearTimeout(timeout);
        }
        //设置定时器，规定时间后执行真实要执行的函数
        timeout = setTimeout(() => {
           fn.apply(this);
        }, delay);
    }
}

// 节流
function throttle(fn) {
  let timer = null; // 首先设定一个变量，没有执行定时器时,默认为 null
  return function () {
    if (timer) return; // 当定时器没有执行的时候timer永远是false,后面无需执行
    timer = setTimeout(() => {
      fn.apply(this, arguments);
       // 最后在setTimeout执行完毕后再把标记设置为true(关键)
       // 表示可以执行下一次循环了。
      timer = null;
    }, 1000);
  };
}