0%

防抖与节流


节流与防抖就像重绘和回流一样重要,都是为了提高性能,一直以为博客里面已经写了,结果发现没有,现在补一下

防抖(debounce)

函数防抖:在事件被触发 n 秒后再执行回调,如果在这 n 秒内事件又被触发,则重新计时。

分解一下需求:

  • 持续触发不执行
  • 不触发的一段时间之后再执行

我们什么场景下会用到呢

举个例子,我们想要让搜索的输入框输入后,开始查询,调用后端的接口,但是直接监听input的change事件,每按一下键盘,就去调用接口了,但是这个时候,用户其实并没有输入完他的关键字,这个时候,就需要用到函数防抖了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 函数防抖的实现
function debounce(fn, wait) {
var timer = null;
return function() {
var context = this,
args = arguments;
// 如果此时存在定时器的话,则取消之前的定时器重新记时
if (timer) {
clearTimeout(timer);
timer = null;
}
// 设置定时器,使事件间隔指定事件后执行
timer = setTimeout(() => {
fn.apply(context, args);
}, wait);
};
}

节流(throttle)

函数节流:规定一个单位时间,在这个单位时间内,只能有一次触发事件的回调函数执行,如果在同一个单位时间内某事件被触发多次,只有一次能生效。

分解一下需求:

  • 持续触发并不会执行多次
  • 到一定时间再去执行

假设,刚刚的那个需求变了,产品发现有一些用户疯狂的敲键盘输入,但是我们的搜索列表就是为空,所以希望每隔一定的时候就要去调用接口,所以当我们监听input的change事件的时候,需要使用到函数节流了,持续触发不会执行,但是到了一定的时间就会开始执行

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 函数节流的实现;
function throttle(fn, delay) {
var preTime = Date.now();
return function() {
var context = this,
args = arguments,
nowTime = Date.now();
// 如果两次时间间隔超过了指定时间,则执行函数。
if (nowTime - preTime >= delay) {
preTime = Date.now();
return fn.apply(context, args);
}
};
}

总结

函数防抖是指在事件被触发 n 秒后再执行回调,如果在这 n 秒内事件又被触发,则重新计时。这可以使用在一些点击请求的事件上,避免因为用户的多次点击向后端发送多次请求。

函数节流是指规定一个单位时间,在这个单位时间内,只能有一次触发事件的回调函数执行,如果在同一个单位时间内某事件被触发多次,只有一次能生效。节流可以使用在 scroll 函数的事件监听上,通过事件节流来降低事件调用的频率。

以上就是我对防抖和节流的一些理解,如果文章由于我学识浅薄,导致您发现有严重谬误的地方,请一定在评论中指出,我会在第一时间修正我的博文,以避免误人子弟。

-------------本文结束感谢您的阅读-------------
没办法,总要恰饭的嘛~~