一文读懂防抖和截流

本文主要是介绍一文读懂防抖和截流，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

本篇文章梗概：

什么是防抖和节流？
他们有什么区别？
分别如何实现？

什么是防抖和节流？
防抖和节流，都是开发过程中防止函数多次调用的方式。我现在写的主要是前端开发中的防抖和节流的介绍。

什么是防抖？
防抖，顾名思义，防止抖动，以免把一次事件误认为多次，敲键盘就是一个每天都会接触到的防抖操作。

想要了解一个概念，必先了解概念所应用的场景。在 JS 这个世界中，有哪些防抖的场景呢？

1. 登录、发短信等按钮避免用户点击太快，以致于发送了多次请求，需要防抖。
2. 调整浏览器窗口大小时，resize 次数过于频繁，造成计算过多，此时需要一次到位，就用到了防抖。
3. 文本编辑器实时保存，当无任何更改操作一秒后进行保存。

什么是节流？
节流，顾名思义，控制水的流量。控制事件发生的频率，如控制为1s发生一次，甚至1分钟发生一次。与服务端(server)及网关(gateway)控制的限流 (Rate Limit) 类似。

scroll 事件，每隔一秒计算一次位置信息等
浏览器播放事件，每个一秒计算一次进度信息等
input 框实时搜索并发送请求展示下拉列表，没隔一秒发送一次请求 (也可做防抖)

防抖和节流的区别
防抖：防止抖动，单位时间内事件触发会被重置，避免事件被误伤触发多次。代码实现重在清零 clearTimeout。
节流：控制流量，单位时间内事件只能触发一次，如果服务器端的限流即 Rate Limit。代码实现重在开锁关锁 timer=timeout; timer=null

防抖和节流的代码实现

防抖的实现

/**
* 防抖(debounce)防止抖动：触发高频事件后 n 秒内函数只会执行一次，如果 n 秒内高频事件再次被触发，则重新计算时间。
* @param {*} func 调用用的函数，function
* @param {*} wait 等待的时间，单位ms
* @param {*} immediate 当immediate为true时，第一次调用该函数的时候，就调用func函数；false表示超时之后再调用
*/
export function debounce(func, wait, immediate) {
let timer;
// 通过闭包缓存一个定时器 id
return function () {
// 将 debounce 处理结果当作函数返回
// 触发事件回调时执行这个返回函数
let context = this;
// 把上下文的this对象保存下来，因为下面的apply要使用
let args = arguments;
console.log(context,"90909090")
// ...args：使用es6的rest运算符，把逗号隔开的值序列组合成一个数组：如test(1,2,3,4) ==> args:[1,2,3,4]
// 符合apply(obj,[])
if (timer) clearTimeout(timer);
//关键点 防抖重在清零
// 如果已经设定过定时器就清空上一次的定时器，clearTimeout取消延迟执行的代码块
if (immediate) {
// 如果immediate为true，那么立马调用该函数
var callNow = !timer;
timer = setTimeout(() => {
timer = null;
}, wait);
if (callNow) func.apply(context, args);
// 过了设定的时间，才执行传过来的函数
} else {
// 开始设定一个新的定时器，定时器结束后执行传入的函数 fn
timer = setTimeout(function () {
func.apply(context, args);
}, wait);
}
};
}

节流的实现

//这个是在上一个函数上的改进，加强版节流函数 throttle
//如下，新增逻辑在于当前触发时间和上次触发的时间差小于时间间隔时，设立一个新的定时器，相当于把 debounce 代码放在了小于时间间隔部分。
export function throttle(fn, wait) {
let timer = null;
let prev = new Date();
return function () {
let nowTime = new Date();
// 获取当前时间，转换成时间戳，单位毫秒
let context = this;
clearTimeout(timer);
// ------ 新增部分 start ------
// 判断上次触发的时间和本次触发的时间差是否小于时间间隔
// 如果小于，则为本次触发操作设立一个新的定时器
// 定时器时间结束后执行函数 fn
if (nowTime - prev > wait) {
fn.apply(context, arguments);
prev = new Date();
// ------ 新增部分 end ------
} else {
timer = setTimeout(() => {
fn.apply(context, arguments);
}, wait);
}
};
}

延伸：
es6 rest argument
es6 引入了rest参数（形式：...变量名），用于获取函数的多余参数，这样就不需要使用arguments对象了。rest参数搭配的变量是一个数组，该变量将多余的参数放入数组中。

var fun = (...item)=>{
console.log(item)
}
fun(11,22,33,44,55,66,77,88,99)

apply方法
apply:方法能劫持另外一个对象的方法，继承另外一个对象的属性.

Function.apply(obj,args)方法能接收两个参数
obj：这个对象将代替Function类里this对象
args：这个是数组，它将作为参数传给Function（args-->arguments）

用法：将数组作为函数参数
例子：Math.max后面可以接任意个参数，最后返回所有参数中的最大值。
一般这样做，需要取数组里面每个值，毕竟很多传参是接受对象的

function getMax(arr){
var arrLen=arr.length;
for(var i=0,ret=arr[0];i<arrLen;i++){
ret=Math.max(ret,arr[i]);
}
return ret;
}

用apply就简单很多

function getMax2(arr){
return Math.max.apply(null,arr);
}

这样看来`...args`,使用es6的rest运算符，把逗号隔开的值序列组合成一个数组：如test(1,2,3,4) ==> args:[1,2,3,4],
`apply`把数组转成对象。这里args是继承的传入函数的参数。

防抖代码，关键就是，对象转换两遍，clearTimeout取消延迟执行的代码块，清零。

其实不管防抖和截流还有很多其他方法，都可以用loadash类库去实现，不用自己苦哈哈的写。

这篇关于一文读懂防抖和截流的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！