前端进击的巨人（八）：浅谈函数防抖与节流-白红宇

前端进击的巨人（八）：浅谈函数防抖与节流

阅读量：7120 次

发布时间：2019-06-28

本文共 3394 字，大约阅读时间需要 11 分钟。

前端进击的巨人（八）：浅谈函数防抖与节流

本篇课题，或许早已是烂大街的解读文章。不过春招系列面试下来，不少伙伴们还是似懂非懂地栽倒在（～面试官～）深意的笑容之下，权当温故知新。

JavaScript的执行过程，是基于栈来进行的。复杂的程序代码被封装到函数中，程序执行时，函数不断被推入执行栈中。所以 "执行栈" 也称 "函数执行栈"。

函数中封装的代码块，一般都有相对复杂的逻辑处理（计算/判断），例如函数中可能会涉及到 DOM 的渲染更新，复杂的计算与验证， Ajax 数据请求等等。

前端页面的操作权，大部分都是属于浏览端的客户爸爸们（单身三十年的手速，惹不起惹不起！！！）。如果函数被频繁调用，造成的性能开销绝对不只一点点。

前： DOM 频繁重绘的卡顿让客户爸爸们想把你揪出来一顿大招。。。

后：后端同学正在提刀赶来的路上：“为什么我的接口被你玩挂了”。。。

既要提升用户体验，又要减少后端服务开销，可见我们大前端的使命不只一页PPT。说好前因，接着就是后果了。既然有优化的需求，必然就要有相应的解决方案。隆重请出主角： “防抖” 与 “节流”。

防抖（debounce)

在事件被触发 n 秒后再执行回调函数，如果在这 n 秒内又被触发，则重新计时延迟时间。

生活化理解：英雄的技能条，技能条读完才能使用技能（R大招60s）

防抖的实现方式分两种 “立即执行” 和 “非立即执行”，区别在于第一次触发时，是否立即执行回调函数。

非立即执行

”非立即执行防抖“ 指事件触发后，回调函数不会立即执行，会在延迟时间 n 秒后执行，如果 n 秒内被调用多次，则重新计时延迟时间

// e.g. 防抖 - 非立即执行function debounce(func, delay) {  var timeout;  return function() {    var context = this;    var args = arguments;    // && 短路运算 == if(timeout) else {...}     timeout && clearTimeout(timeout);     timeout = setTimeout(function(){      func.apply(context, args);    }, delay);  }}// 调用var printUserName = debounce(function(){   console.log(this.value);}, 800);document.getElementById('username')  .addEventListener('keyup', printUserName);

立即执行

“立即执行防抖” 指事件触发后，回调函数会立即执行，之后要想触发执行回调函数，需等待 n 秒延迟

// e.g. 防抖 - 立即执行function debounce(func, delay) {    var timeout;    return function() {        var context = this;        var args = arguments;        callNow = !timeout;        timeout = setTimeout(function() {            timeout = null;        }, delay);        callNow && func.apply(context, args);    }}

函数防抖原理：通过维护一个定时器，其延迟计时以最后一次触发为计时起点，到达延迟时间后才会触发函数执行。

节流（throttle)

规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效（间隔执行）

生活化理解：

FPS射击游戏子弹射速（即使按住鼠标左键，射出子弹的速度也是限定的）

水龙头的滴水（水滴攒到一定重量才会下落）

函数节流实现的方式有 “时间戳” 和 “定时器” 两种。

时间戳

// e.g. 节流 - 时间戳function throttle(func, delay) {  var lastTime = 0;  return function() {    var context = this;    var args = arguments;    var nowTime = +new Date();    if (nowTime > lastTime + delay) {      func.apply(context, args)      lastTime = nowTime;    }  }}

“时间戳” 的方式，函数在时间段开始时执行。

缺点：假定函数间隔1s执行，如果最后一次停止触发，卡在4.2s，则不会再执行。

定时器

// e.g. 节流 - 定时器function throttle(func, delay) {  var timeout;  return function() {    var context = this;    var args = arguments;    if (!timeout) {      setTimeout(function(){        func.apply(context, args);        timeout = null;      }, delay)    }  }}

“定时器” 的方式，函数在时间段结束时执行。可理解为函数并不会立即执行，而是等待延迟计时完成才执行。（由于定时器延时，最后一次触发后，可能会再执行一次回调函数）

时间戳 + 定时器（互补优化）

// e.g. 节流 - 时间戳 + 定时器function throttle(func, delay) {  let lastTime, timeout;  return function() {    let context = this;    let args = arguments;    let nowTime = +new Date();    if (lastTime && nowTime < lastTime + delay) {      timeout && clearTimeout(timeout);      timeout = setTimeout(function(){        lastTime = nowTime;        func.apply(context, args);      }, delay);    } else {      lastTime = nowTime;      func.apply(context, args);    }  }}

合并优化的原理：“时间戳”方式让函数在时间段开始时执行（第一次触发立即执行），“定时器”方式让函数在最后一次事件触发后（如4.2s）也能触发。

函数节流原理：一定时间内只触发一次，间隔执行。通过判断是否到达指定触发时间，间隔时间固定。