理解Javascript中的函数节流和函数防抖

本文主要是介绍理解Javascript中的函数节流和函数防抖，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

函数节流和函数防抖都是用来优化性能，以及避免短时间内连续调用某个函数的方案。一下我们通过两个例子，来理解两种方案，以及它们的应用场景。

函数节流

函数节流即为，一个函数执行一次后，只有大于设定的执行周期后，才会执行第二次。

这里我们可以理解为当一个函数立即执行后，它需要一个冷却时间才能被执行第二次，也就是我们需要去节制函数的调用次数，即为节流。

我们可以通过检测两次函数调用的时间差，如果在设定的函数冷却时间之内，则不能执行，如果在冷却时间之外则可以执行。通过函数节流可以优化Javascript的性能，防止一个函数被无差别的多次反复执行。

// JS核心/01.js
/*** 函数节流* @param fn 要被节流的函数* @param delay 规定的时间（函数执行的冷却时间）*/
function throttle(fn, delay) {var lastTime = 0;// 需要通过闭包来保存lastTime的状态，否则每次调用lastTime都会被初始化为0return function () {var nowTime = Date.now();if (nowTime - lastTime > delay) {fn.call(this); // 解决fn函数内this指向问题，如果不绑定this，函数的调用者为window（因为在这里执行函数函数前没有执行者），如果绑定了this，函数的this就指向了调用者本身lastTime = Date.now();}};
}var fun = throttle(function () {console.log("触发了！");
}, 500);fun();setTimeout(function () {fun();
}, 400)setTimeout(function () {fun();
}, 600)

输出结果:

触发了！
触发了！

函数防抖

函数防抖即为，一个需要频繁触发的函数，在规定时间内，只让最后一次生效，前面的不生效。

也就是说说一个方法将执行时，它会在一段时间内等待有没有事件第二次触发这个方法，如果有它就不执行了，如果没有才执行。

我们可以通过定时器，在方法第一次调用时，设置一个定时器，然后触发方法，假如在方法被触发前，该方法又被调用了，那在第二次调用前，会清除第一次调用方法而生成的定时器，重新再生成一个定时器去执行方法。

当我们页面上有一个按钮，希望用户在多次快速点击按钮时，仅触发一次按钮效果，我们就可以使用函数防抖机制，来避免用户在快速点击按钮时，连续触发多次方法。

/*** 函数防抖* @param fn 添加防抖的函数* @param delay 防抖间隔时间*/
function debounce(fn, delay) {// 记录上一次的延时器var timer = null;return function () {// 清除上一次的延时器clearTimeout(timer);// 重新设定新的延时器timer = setTimeout(function () {fn.apply(this);}, delay);}
}var fun = debounce(function () {console.log('触发了！');
}, 1000)setTimeout(function () {fun()
}, 200)  // 页面加载200毫秒 => 执行fun()setTimeout(function () {fun()
}, 300)  // 页面加载300毫秒 => 执行fun() => 与上一次执行间隔不超过1000毫秒 => 重置定时器 => 等待执行函数setTimeout(function () {fun()
}, 400)  // 页面加载400毫秒 => 执行fun() => 与上一次执行间隔不超过1000毫秒 => 重置定时器 => 等待执行函数// 页面加载1400毫秒 => 没有清楚定时器 => 执行防抖函数setTimeout(function () {fun()
}, 1402)  // 页面加载1401毫秒执行fun() => 清除定时器 => 新建定时器等待执行防抖函数 => 等待过程中定时器未被清除 => 2402毫秒时执行防抖函数