Javascript Debounce 没有从 vue 组件中清除它的队列

Question

我正在使用这里的去抖动方法https://www.freecodecamp.org/news/javascript-debounce-example/

function debounce(func, timeout = 300){
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => { func.apply(this, args); }, timeout);
  };
}
function saveInput(){
  console.log('Saving data');
}
const processChange = debounce(() => saveInput());

我想包含在我们拥有的库中，所以在 common.js 我有：

export default {
  otherStuff,
  debounce(func, timeout = 300) {
    let timer;
    return (...args) => {
      clearTimeout(timer);
      timer = setTimeout(() => {
        func.apply(this, args);
      }, timeout);
    };
  },

在 vue.js 我有一个文本框，其中有一个事件 @keyup="searchboxChange()"

在方法部分：

import common from "@/assets/js/Service/Common";
... stuff removed for brevity
methods:
  {
    searchboxChange(){
      common.debounce(() => this.filterChanged(), 1000)();
    },
  }

我必须在 debounce 方法的末尾包含 () 否则它实际上并没有触发。然而，虽然它完美地去抖动，但当超时到期时，每个事件都会被触发。因此，如果我的搜索是“HELLO”，我会看到同时触发了 5 个请求，因为 this.filterChanged() 被调用了 5 次。

我确信超时变量的范围很简单，因为在 debounce 方法中添加 console.log 显示每次都未定义计时器。

Answer 1

您需要对组件方法进行去抖动，否则您将从组件方法中调用多个去抖动函数。

像这样的东西应该可以工作

methods: {
  // ...
  searchboxChange: common.debounce(function() {
    this.filterChanged();
  }, 1000)
}

注意使用 function 而不是短函数语法。您需要这样做以确保 this

的词法范围正确

Answer 2

首先，一如既往地感谢所有提供解决方案的人。但是，none 超出了“this”范围不正确的范围。

解决办法是在created中设置函数。（来源：https://forum.vuejs.org/t/lodash-debounce-not-working-when-placed-inside-a-method/86334/4）

这（万一 link 死了）实际上是在说

move the part that you need to debounce into its own method and debounce that (like you did in the codepen for he first method).

Then you can call the debounced method from the event handler method.

It’s also better to debounce each instance method dynamically during created, otherwise component instances that the same debounced function and that can lead to wonky debounce behaviour:

及其代码示例：

created() {
  this.updateForm = _.debounce(this.updateForm, 500)
},
methods: {
    triggerUpdate(event){
      // perform some action before debouncing
     this.updateForm(event)
    } ,
    updateForm: (event){
     console.log('in update')
    }

所以对于我来说：

  created() {
    this.searchboxChange = common.debounce(this.filterChanged, 1000)
  },

是的，确实如此。

结果：

现在只有一个网络调用。

Javascript Debounce 没有从 vue 组件中清除它的队列

Javascript Debounce not clearing it's queue from vue component

javascript

scope

debounce