Question

Lodash 的 _.debounce() 在 Vue.js 中不起作用

2018-10-29

18590

javascript vue.js lodash

当 Vue.js 中名为 q 的组件属性被修改时，我尝试运行名为 query() 的方法。

此操作失败，因为 this.query() 未定义。 This 指的是我的组件实例，但不知何故不包含方法。

下面是相关代码部分，我尝试监视组件属性 q 并运行 query() 函数：

methods: {
  async query() {
    const url = `https://example.com`;
    const results = await axios({
      url,
      method: 'GET',
    });
    this.results = results.items;
  },
  debouncedQuery: _.debounce(() => { this.query(); }, 300),
},
watch: {
  q() {
    this.debouncedQuery();
  },
},

错误：

TypeError: _this2.query is not a function

如果我按如下方式编写 debounce() 调用，则 TypeError：expected a function 错误会在页面加载时更早出现。

debouncedQuery: _.debounce(this.query, 300),

Answer 1

问题出在 _.debounce 中定义的箭头函数的词法范围。 this 绑定到您在其中定义它的对象，而不是实例化的 Vue 实例。

如果您将箭头函数替换为常规函数，则范围绑定正确：

methods: {
  // ...
  debouncedQuery: _.debounce(function () { this.query(); }, 300)
}

Answer 2

我们可以用几行纯 JS（ES6）代码来实现：

function update() {

    if(typeof window.LIT !== 'undefined') {
        clearTimeout(window.LIT);
    }

    window.LIT = setTimeout(() => {
        // do something...
    }, 1000);

}

Answer 3

正如另一篇文章所回答的这在 Vue 中未定义，使用 debounce 方法在我看来，添加 debounce 的最佳方法是在方法中正常创建方法，例如：

setHover() {
      if (this.hoverStatus === 'entered') {
        this.hoverStatus = 'active'
      }
    },

然后在您创建的块中替换它，例如：

  created() {
    this.setHover = debounce(this.setHover, 250)
  },