防抖和节流

应用场景

防抖和节流都是用来防止高频率的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);

其它前端性能优化：

• 图片优化——质量与性能的博弈
• 浏览器缓存机制介绍与缓存策略剖析
• webpack 性能调优与 Gzip 原理
• 本地存储——从 Cookie 到 Web Storage、IndexDB
• CDN 的缓存与回源机制解析
• 服务端渲染的探索与实践
• 解锁浏览器背后的运行机制
• DOM 优化原理与基本实践
• Event Loop 与异步更新策略
• 回流（Reflow）与重绘（Repaint）
• Lazy-Load
• 事件的节流（throttle）与防抖（debounce
• 前端学习资料下载
• 技术体系分类

前端技术架构体系（没有链接的后续跟进）：

• 调用堆栈
• 作用域闭包
• this全面解析
• 深浅拷贝的原理
• 原型prototype
• 事件机制、
• Event Loop
• Promise机制、
• async / await原理、
• 防抖/节流原理
• 模块化详解、
• es6重难点、
• 浏览器熏染原理、
• webpack配置(原理)
• 前端监控、
• 跨域和安全、
• 性能优化（参见上面性能优化相关）
• VirtualDom原理、
• Diff算法、
• 数据的双向绑定
• [TCP协议(三次握手、四次挥手)](https://blog.csdn.net/woleigequshawanyier/article/details/85223642
• DNS域名解析

其它相关

• 前端学习资料下载
• 技术体系分类
• react-native 实战项目学习
• react-naitve 采坑笔记

欢迎各位看官的批评和指正，共同学习和成长
希望该文章对您有帮助，你的 支持和鼓励会是我持续的动力