javascript-Vue：防抖 (Debouncing)、节流 (Throttling)

源码展示

//防抖
const Debounce = function (fn, t) {
  let delay = t || 200;
  let timer = null;
  return function () {
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      fn.apply(this, arguments);
    }, delay);
  }
}
//节流
const Throttle = (fn, delay = 1000) => {
  //距离上一次的执行时间
  let lastTime = 0
  return function () {
    let _this = this
    let _arguments = arguments
    let now = new Date().getTime()
    //如果距离上一次执行超过了delay才能再次执行
    if(now - lastTime > delay){
      fn.apply(_this,_arguments)
      lastTime = now
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

防抖 (Debouncing)

防抖的核心思想是确保函数在指定的时间间隔t之后才执行，如果在这段时间内又触发了事件，则重新开始计时。这通常用于输入框的搜索功能，以避免用户输入时过于频繁地触发搜索请求。

代码解释：

1. Debounce 函数接收两个参数：fn 是需要防抖的函数，t 是防抖的时间间隔，默认为 200 毫秒。
2. timer 是一个变量，用于存储定时器的引用。
3. 返回的匿名函数是防抖后的函数，它首先检查 timer 是否存在。
4. 如果 timer 存在，使用 clearTimeout 清除之前的定时器。
5. 然后设置一个新的 timer 使用 setTimeout，在 delay 毫秒后执行传入的函数 fn。
6. fn.apply(this, arguments) 确保 fn 函数在正确的作用域下运行，并且带有正确的参数。

节流 (Throttling)

节流的核心思想是在指定的时间间隔内，无论触发了多少次事件，只有第一次事件会被执行，之后如果在时间间隔内再次触发事件，则这些事件都会被忽略，直到时间间隔过后。

代码解释：

1. Throttle 函数接收两个参数：fn 是需要节流的函数，delay 是节流的时间间隔，默认为 1000 毫秒。
2. lastTime 变量用于记录函数上次执行的时间。
3. 返回的匿名函数是节流后的函数，它首先获取当前时间 now。
4. 然后检查当前时间与上次执行时间的差值是否大于或等于 delay。
5. 如果是，执行 fn 函数，并将 lastTime 更新为当前时间。

这样，无论事件触发的频率如何，fn 函数在任何指定的时间间隔内最多只会执行一次。这对于控制按钮点击事件、滚动事件、浏览器的resize事件等都很有用，以避免不必要的性能开销。

---

防抖 (Debouncing)

防抖函数确保一段时间内，无论触发了多少次事件，只有第一次事件会被执行。如果在这段时间内再次触发事件，则会重置计时器。

const Debounce = function (fn, t) {
  let delay = t || 200; // 设置防抖时间，默认为200毫秒
  let timer = null;      // 定时器标识

  // 返回一个新的函数，这个函数会在指定的防抖时间后执行传入的函数fn
  return function () {
    // 如果定时器已经存在，则清除
    if (timer) {
      clearTimeout(timer);
    }
    // 设置一个新的定时器，当超过防抖时间后执行传入的函数fn
    timer = setTimeout(() => {
      fn.apply(this, arguments); // 确保fn在正确的作用域下运行，并且带有正确的参数
    }, delay);
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

节流 (Throttling)

节流函数确保在指定的时间间隔内，无论触发了多少次事件，只有第一次事件会被执行。如果在时间间隔内再次触发事件，则这些事件都会被忽略，直到时间间隔过后。

const Throttle = (fn, delay = 1000) => {
  // 记录上次执行函数的时间
  let lastTime = 0;

  // 返回一个新的函数，这个函数会在指定的节流时间后执行传入的函数fn
  return function () {
    let _this = this;      // 当前的作用域
    let _arguments = arguments; // 当前的参数集合
    let now = new Date().getTime(); // 获取当前时间

    // 如果当前时间与上次执行的时间差超过了节流时间，则执行函数
    if (now - lastTime > delay) {
      fn.apply(_this, _arguments); // 执行函数fn，确保在正确的作用域下运行，并且带有正确的参数
      lastTime = now; // 更新上次执行的时间为当前时间
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

这两个函数通常用于优化事件处理程序，以避免因为频繁触发的事件而导致的性能问题。例如，Debounce 可以用在搜索框输入时的搜索请求，而 Throttle 可以用在滚动事件的监听中。