函数节流与函数防抖

Javascript: 函数防抖与函数节流

防抖

名词解释：在事件被触发 n 秒后再执行回调函数，如果在这 n 秒内又被触发，则重新计时。
使用场景：以百度输入框例，比如你要查询 XXx，想实现输完了 XXx 之后，再进行搜索请求，这样可以有效减少请求次数，节约请求资源。

1
2
3
4
5
6
7
8
9
10
11
function debounce() {
  let timer = null;
  return function () {
    clearTimeout(timer);
    timer = setTimeout(() => {
      console.log("开始搜索");
    }, 500);
  };
}
let btn = document.getElementById("btn");
btn.addEventListener("click", debounce());

节流

名词解释：连续执行函数，每隔一定时间执行函数。规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。
使用场景：鼠标连续多次 click 事件，mousemove 事件，监听滚动事件，比如是否滑到底部自动加载更多等等…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function throttle() {
  let pretime = null;
  let time = 1000;
  let timer = null;
  return function () {
    let now = +new Date();
    clearTimeout(timer);
    if (!pretime) pretime = now;
    if (now - pretime >= time) {
      console.log("开始搜索");
      pretime = null;
    } else {
      timer = setTimeout(() => {
        console.log("开始搜索");
      }, 500);
    }
  };
}
let btn = document.getElementById("btn");
btn.addEventListener("click", throttle());

总结

根据实际业务场景，合理的利用 debounce（防抖）和 throttle（节流）可以优化性能和提高用户体验。

  • 函数防抖是某一段时间内只执行一次；
  • 函数节流是间隔时间执行，不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数。
  • 防抖是维护一个计时器，规定在 delay 时间后触发函数，但是在 delay 时间内再次触发的话，都会清除当前的 timer 重新计时。这样一来，只有最后一次操作事件才被真正触发。
  • 节流是通过判断是否到达一定时间来触发函数，若没到规定时间则使用计时器延后，而下一次事件则会重新设定计时器。