防抖和节流

应用场景

防抖和节流都是用来防止高频率的js代码的执行

防抖

• 防抖本质上就是以最后的操作为标准
  打个比方，此时此刻我们都在排队等公交，司机说必须等到坐满才会发车，这时候的参照标准就是最后一个人上车，公交车好比我们的js代码，最后一个人就充当我们的执行条件。
  看代码：

let setTimer;
let shake = function() {
  clearTimeout(setTimer);
  setTimer = setTimeout(() => {
    console.log("这里是实际的业务代码");
  }, 0);
};

let interTimer = setInterval(() => {
  shake();
}, 0);

let timer = setTimeout(() => {
  clearInterval(interTimer);
  clearTimeout(timer);
  timer = null;
  interTimer = null;
}, 2000);

执行以上代码，控制台会在 2s 后打出日志，2s 之内的操作都被清空，以最后一次的操作为准。

如果你在监听滚动事件，假设两秒以内用户在不断的平凡的触发onScroll事件，只有用户暂停滚动后，才会去执行响应的操作，代码如下

// 函数防抖
var timer = false;
document.getElementById("xxxx").onscroll = function(){
    clearTimeout(timer); // 清除未执行的代码，重置回初始化状态
    timer = setTimeout(function(){
        console.log("函数防抖");
    }, 300);
};

节流

• 定时器实现节流

let isAllow = true;
function shake() {
  let fun = function() {
    if (!isAllow) return;
    isAllow = false;
    let timer = setTimeout(() => {
      console.log("这里是实际的业务代码");
      clearTimeout(timer);
      timer = null;
      isAllow = true;
    }, 1000);
  };
  fun();
}
let interTimer = setInterval(() => {
  shake();
}, 0);

执行以上代码你讲会看到控制台每隔 1s 后打印出结果，1s 内不会执行打印日志

• 闭包实现函数节流：

// fn是我们需要包装的事件回调, interval是时间间隔的阈值
function throttle(fn, interval) {
  let last = 0; // last为上一次触发回调的时间
  // 将throttle处理结果当作函数返回
  return function() {
    let context = this; // 保留调用时的this上下文
    let args = arguments; // 保留调用时传入的参数
    let now = +new Date(); // 记录本次触发回调的时间
    // 判断上次触发的时间和本次触发的时间差是否小于时间间隔的阈值
    if (now - last >= interval) {
      // 如果时间间隔大于我们设定的时间间隔阈值，则执行回调
      last = now;
      fn.apply(context, args);
    }
  };
}
// 用throttle来包装scroll的回调
const better_scroll = throttle(() => console.log("触发了滚动事件"), 1000);
setInterval(() => better_scroll(), 0);

更多的干货请点击这里
react-native 实战项目学习
欢迎各位看官的批评和指正，共同学习和成长
希望该文章对您有帮助，也希望得到您的鼓励和支持