溜到飞起，在 Vue 中使用防抖和节流

前端大全 2022-07-13

↓推荐关注↓

本文为翻译
原文标题：How to Debounce and Throttle Callbacks in Vue
原文作者：Dmitri Pavlutin
原文地址：https://dmitripavlutin.com/vue-debounce-throttle/

在监听频繁触发的事件时，一定要多加小心，比如用户在输入框打字、窗口大小调整、滚动、Intersection Observer 事件。

这些事件总是被频繁触发，可能几秒一次。如果针对每次事件都发起 fetch 请求（或类似的行为），那显然是不明智的。

我们需要做的就是减缓事件处理程序的执行速度。这种缓冲技术就是防抖（debounce）和节流（throttle）^[1] 。

在本文中，你会了解到如何在 Vue 组件中使用防抖和节流控制观察者（watchers）和事件处理程序。

1. 观察者防抖

我们先从一个简单的组件开始，我们的任务是将用户输入到文本框中的文本输出到控制台:

<template>
  <input v-model="value" type="text" />
  <p>{{ value }}</p>
</template>
<script>
export default {
  data() {
    return {
      value: "",
    };
  },
  watch: {
    value(newValue, oldValue) {
      console.log("Value changed: ", newValue);
    }
  }
};
</script>

打开demo^[2]

打开 demo，在输入框敲几个字符。每次输入时，值就会被 log 到控制台。

我们通过使用观察者（watcher）监听 value 数据属性来实现了打印日志。但如果你想在观察者的回调中加入一个使用 value 作为参数的 GET 请求，那你应该不会期望太过频繁地发起请求。

我们来对打印控制台日志这个行为做一下防抖。核心思想是创建一个防抖函数，然后在观察者内部调用该函数。

我在这里选择了 'lodash.debounce' 的防抖实现，但你可以自由选择喜欢的实现方式。

我们来将防抖逻辑应用到组件：

<template>
  <input v-model="value" type="text" />
  <p>{{ value }}</p>
</template>
<script>
import debounce from "lodash.debounce";
export default {
  data() {
    return {
      value: "",
    };
  },
  watch: {
    value(...args) {
      this.debouncedWatch(...args);
    },
  },
  created() {
    this.debouncedWatch = debounce((newValue, oldValue) => {
      console.log('New value:', newValue);
    }, 500);
  },
  beforeUnmount() {
    this.debouncedWatch.cancel();
  },
};
</script>

试试 demo^[3]

如果你打开这个 demo，你会发现其实从用户角度来看，变化不大：你依旧可以像上一个 demo 中一样自由输入字符。

但有一个区别：只有在最后一次输入的 500ms 之后，才会将新的输入值打印日志到控制台。这说明防抖在生效。

观察者的防抖实现只需要 3 个简单步骤：

在 create() 钩子里，创建防抖回调，并将其赋值到实例上：this.debouncedWatch = debounce(..., 500)。
在观察者回调 watch.value() { ... } 中传入正确的参数调用 this.debouncedWatch()。
最后，beforeUnmount() 钩子中调用 this.debouncedWatch.cancel() ，在卸载组件之前，取消所有还在 pending 的防抖函数执行。

采用同样的方式，你可以对任意数据属性的观察者应用防抖。然后就可以安全执行防抖回调内部的一些比较重的操作，比如网络请求、繁重的 DOM 操作，等等。

2. 事件处理器防抖

上面一节，我展示了如何对观察者使用防抖，那么常规的事件处理器呢？

我们重用之前用户输入数据到输入框的例子，但这一次会给输入框加个事件处理器。

像往常一样，如果你没有采取任何缓冲的措施，每当值被修改时，会被打印到控制台：

<template>
  <input v-on:input="handler" type="text" />
</template>
<script>
export default {
  methods: {
    handler(event) {
      console.log('New value:', event.target.value);
    }
  }
};
</script>

试试 demo^[4]

打开这个 demo，在输入框打几个字符。看看控制台：你会发现每次你输入的时候就会有日志被打印出来。

同样，如果你会执行一些比较重的操作（比如网络请求），可就不合适了。

对事件处理器使用防抖，可以参考下面这个：

<template>
  <input v-on:input="debouncedHandler" type="text" />
</template>
<script>
import debounce from "lodash.debounce";
export default {
  created() {
    this.debouncedHandler = debounce(event => {
      console.log('New value:', event.target.value);
    }, 500);
  },
  beforeUnmount() {
    this.debouncedHandler.cancel();
  }
};
</script>

试试 demo^[5]

打开 demo，输入一些字符。组件只有在最后一次输入的 500ms 之后，才会将新的输入值打印日志到控制台。防抖再一次生效了！

事件处理器的防抖实现只需要 3 个步骤：

. 在 create() 钩子里，创建实例后，立刻将防抖回调 debounce(event => {...}, 500) 赋值到 this.debouncedHandler 。
在输入框的 template 中给 v-on:input 赋上 debouncedHandler ：<input v-on:input="debouncedHandler" type="text" />
最后，在卸载组件之前，在 beforeUnmount() 钩子中调用 this.debouncedHandler.cancel() ，取消所有还在 pending 的函数调用。

另一方面，这些例子应用了防抖的技术。然而，同样的方式可以以用于创建节流函数。

3. 注意

你可能不理解：为什么不直接在组件的 method 选项中创建防抖函数，然后在 template 中调用这些方法作为事件处理器？

// ...
  methods: {
    // Why not?
    debouncedHandler: debounce(function () { ... }}, 500)
  }
// ...

这比在实例对象上创建防抖函数要简单的多。

例如：

<template>
  <input v-on:input="debouncedHandler" type="text" />
</template>
<script>
import debounce from "lodash.debounce";
export default {
  methods: {
    // Don't do this!
    debouncedHandler: debounce(function(event) {
      console.log('New value:', event.target.value);
    }, 500)
  }
};
</script>

试试 demo^[6]

这次不是在 created() 钩子里创建防抖回调了，而是将防抖回调赋给了 methods.debouncedHandler 。

你如果试过 demo，你会发现是有效果的！

问题是，组件使用 export default { ... } 导出的 options 对象，包括方法，会被组件实例重用。

如果网页中有 2 个以上的组件实例，那么所有的组件都会应用相同的防抖函数 methods.debouncedHandler — 这会导致防抖出现故障。

4. 总结

在 Vue 中，可以很轻松的对观察者和事件处理器应用防抖和节流。

核心逻辑就是，在 created() 钩子里，创建防抖或节流的回调，并赋值在实例上。

// ...
  created() {
    this.debouncedCallback = debounce((...args) => {
      // The debounced callback
    }, 500);
  },
// ...

A）然后在观察者内部调用实例上的防抖函数：

// ...
  watch: {
    value(...args) {
      this.debouncedCallback(...args);
    },
  },
// ...

B）或在 template 中设定一个事件处理器：

<template>
  <input v-on:input="debouncedHandler" type="text" />
</template>

在这之后，每次调用 this.debouncedCallback(...args) ，就算执行频率非常高，内部的回调也能缓冲执行。

你对 Vue 中的防抖和节流还什么问题吗？欢迎留言！

参考资料

[1]

防抖（debounce）和节流（throttle）:https://css-tricks.com/debouncing-throttling-explained-examples/

[2]

打开demo:https://codesandbox.io/s/vue-input-szgn1?file=/src/App.vue

[3]

试试 demo:https://codesandbox.io/s/vue-input-debounced-4vwex?file=/src/App.vue

[4]

试试 demo:https://codesandbox.io/s/vue-event-handler-plls4?file=/src/App.vue

[5]

试试 demo:https://codesandbox.io/s/vue-event-handler-debounced-973vn?file=/src/App.vue

[6]

试试 demo:https://codesandbox.io/s/vue-event-handler-debounced-incorrectly-320ci?file=/src/App.vue

作者：Tapir
https://juejin.cn/post/7034458741990752287

- EOF -

推荐阅读点击标题可跳转

1、Vue 项目前端多语言方案

2、Vue 涉及国家安全漏洞？尤雨溪亲自回应

3、12 个 Vue 开发中的性能优化小技巧

觉得本文对你有帮助？请分享给更多人

推荐关注「前端大全」，提升前端技能

点赞和在看就是最大的支持❤️

宾曰语云被法学教授投诉：严重侵权，“违法犯罪”！

京东Plus的隐藏特权，很多会员都没领取，白交了会员费...

二湘：朱令去世一周年，清华学子控诉清华在朱令案中的冷血和无耻

96岁的朱总理

“上海王”柯庆施之死的真相

溜到飞起，在 Vue 中使用防抖和节流

1. 观察者防抖

2. 事件处理器防抖

3. 注意

4. 总结

参考资料

您可能也对以下帖子感兴趣

宾曰语云被法学教授投诉：严重侵权，“违法犯罪”！

京东Plus的隐藏特权，很多会员都没领取，白交了会员费...

二湘：朱令去世一周年，清华学子控诉清华在朱令案中的冷血和无耻

96岁的朱总理

“上海王”柯庆施之死的真相

生成图片，分享到微信朋友圈

溜到飞起，在 Vue 中使用防抖和节流

1. 观察者 防抖

2. 事件处理器 防抖

3. 注意

4. 总结

参考资料

您可能也对以下帖子感兴趣

1. 观察者防抖

2. 事件处理器防抖