原生JavaScript函数的防抖(debounce)与节流(throttle) 带 插件完整解析版 [helpers.js]
前言：
本人纯小白一个，有很多地方理解的没有各位大牛那么透彻，如有错误，请各位大牛指出斧正！小生感激不尽。
函数防抖与节流是做什么的？下面进行通俗的讲解。
本文借鉴：https://www.cnblogs.com/cc-freiheit/p/10827372.html
大致原理：
函数防抖: 函数防抖做一件事，这件事并不是立即去做，而是等到一段时间之后再去做。如果这段时间内有一个东西再次触发了，那么就再等一次时间。生活中的例子: 电梯开门时进去等5S后自动关闭，如果这期间有人进来，他又会重新再等5S，以此类推
函数节流: 函数节流是指在某一段时间，去执行一件事，但是他不会重新停止计时，他只能保证在某一段时间内运行一次。
函数节流与函数防抖的区别：
函数节流是固定一段时间运行，会持续触发事件。函数防抖则是在一段事件内运行一次以后不会持续触发事件，要等一段时间才会再次触发。
准备工作：
<div class="text"
style="height:150px; line-height:150px; text-align:center; color:#000000; background-color:rgb(212, 233, 163); font-size:80px;">
</div>
<script>
var text = document.querySelector('.text');
var num = 1;
function count() {
text.innerHTML = num++;
};
text.onmousemove = function() {
count();
}
</script>
上面代码运行时，鼠标在绿色区域移动时，由于count函数的持续触发，会导致下图效果
为了避免频繁触发，我们可以使用函数防抖和函数节流来限制频繁触发
函数防抖：
// 非立即执行版
<script>
function debounce(callback, time) {
var timer;
return function () {
var args = arguments;
var self = this;
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(function () {
callback.apply(self, args);
}, time)
}
}
</script>
使用方法：
text.onmousemove = debounce(count, 1000);
非立即执行版的意思是触发事件后函数不会立即执行，而是在 time秒后执行，如果在 time 秒内又触发了事件，则会重新计算函数执行时间。(鼠标移出元素时还会触发最后一次)效果如下：
// 立即执行版
<script>
function debounce(callback, time) {
var timer;
return function () {
var args = arguments;
var self = this;
if (timer) {
clearTimeout(timer);
}
var callNow = !timer;
timer = setTimeout(function () {
timer = null;
}, time);
if (callNow) {
callback.apply(self, args);
}
}
}
</script>
立即执行版的意思是触发事件后函数会立即执行，然后 time 秒内不触发事件才能继续执行函数的效果。用法同上。（鼠标移出元素时，视time的间隔而确定是否触发最后一次）效果如下
函数节流：
<script>
// 定时器版
function throttle(callback, time) {
var timer;
return function () {
if(timer) {
return;
}
var args = arguments;
var self = this;
timer = setTimeout(function () {
callback.apply(self, args);
timer = null;
},time);
}
}
</script>
使用方法：
text.onmousemove = throttle(count, 1000);
效果如下
定时器执行版的意思是在持续触发事件的过程中，函数不会立即执行，并且每 1s 执行一次。(在移出触发事件后，函数还会再执行一次。)
<script>
// 时间戳版
function throttle(callback, time) {
var t = 0; // 定义一个时间戳
return function () {
var nowDate = Date.now(); //获取当前时间戳
console.log(nowDate)
if (!t || Date.now() - t >= time) {
callback.apply(this, arguments);
t = Date.now();
}
}
}
</script>
使用方法：
text.onmousemove = throttle(count, 1000);
效果如下
时间戳版的意思是在持续触发事件的过程中，函数会立即执行，并且每 1s 执行一次。(在移出触发事件后，函数还会再执行一次。)
函数防抖合并插件版
// helpers.js
/**
* 函数防抖
* @param {Function} callback 回调函数
* @param {Number} time 延迟的时间
* @param {Boolean} immediate 是否立即执行
*/
this.myPlugin.debounce = function (callback, time, immediate) {
// 设置默认值（如果用户未传参数immediate的情况下）
if (immediate === undefined) {
immediate = true;
}
var timer; // 定义一个定时器
if (immediate) {
return function () {
clearTimeout(timer); // 直接清除之前的定时器
var self = this; // 保存this的值
var args = arguments; // 利用闭包保存参数数组
var callNow = !timer; // 取反
timer = setTimeout(function () {
timer = null; // 清空定时器
}, time)
if (callNow) {
callback.apply(self, args); //调用apply进行参数的传入
}
}
} else {
return function () {
clearTimeout(timer); // 直接清除之前的定时器
var self = this; // 保存this的值
var args = arguments; // 利用闭包保存参数数组
timer = setTimeout(function () {
callback.apply(self, args); // 调用apply进行参数的传入
}, time);
}
}
}
函数节流合并插件版
// helpers.js
/**
* 函数节流
* @param {Function} callback 回调函数
* @param {Number} time 延迟的时间
* @param {Boolean} immediate 是否立即执行
*/
this.myPlugin.throttle = function (callback, time, immediate) {
if (immediate === undefined) {// 设置默认值（如果用户未传参数immediate的情况下）
immediate = true;
}
if (immediate) {
var t; // 定义一个时间戳，默认为null
return function () {
var self = this; // 保存this的值
var args = arguments; // 利用闭包保存参数数组
// 只要时间没有值就可以执行函数 或 距离上次执行的时间已超过规定的值
// 当前时间戳 - 之前的时间戳 ≥ 传入的时间
if (!t || Date.now() - t >= time) {
callback.apply(self, args);
t = Date.now();
}
}
} else {
var timer;
return function () {
if (timer) {
return;// 如果有计时器的情况下直接返回
}
var self = this; // 保存this的值
var args = arguments; // 利用闭包保存参数数组
timer = setTimeout(function () {
callback.apply(self, args); // 调用apply进行参数的传入
timer = null; // 函数节流要清空定时器，如果这里不清空，他会发现上面一直有定时器(return那里)，就不会再次运行了
}, time)
}
}
}
插件的使用
<!--插件要考虑通用性，易用性，尽量不要与其他功能冲突，防止污染太多的window上的全局变量，因此我这里使用多个js文件只污染一个全局变量的方式！在helpers.js中添加如下代码
if (!this.myPlugin) {
this.myPlugin = {};
}
-->
<script src="../../plugin/helpers.js"></script> <!--引入插件-->
<script>
var handle = myPlugin.debounce(function (width) { // 调用插件
console.log(width); // 打印浏览器视口宽度
}, 1000); // 每隔1000毫秒打印一次
window.onresize = function () {
handle(document.documentElement.clientWidth); // 浏览器窗口改变时触发
}
</script>
结语
-
怀着瑟瑟发抖的心情发了第一篇知识博客，有哪儿写错的请各位大牛指出。
-
好想进入小白之列，与大牛肩并脚。
浙公网安备 33010602011771号