Vue.js去抖动滚动

Question

我正在尝试将去抖动包与Vue.js v-on:scroll绑定一起使用，如下所示：

<div @scroll="debounce(onScrollMessages, 200)"></div>

问题在于， debounce实际上会返回要使用的去抖动功能，但是以这种方式绑定事件实际上将在每个滚动事件中调用debounce(onScrollMessages, 200) ，这意味着将在每个滚动事件中计算并创建去抖动功能。

实际的问题是@scroll将绑定事件，如下所示：

onScroll: function () {
   debounce(onScrollMessages, 200);
}

但是，为了只计算一次去抖动功能，它应该将事件绑定如下：

// Notice how now the scroll event calls directly the 
// debounced function returned by "debounce()", not the
// function that calls "debounce()"
onScroll: debounce(onScrollMessages, 200)

我怎样才能绑定@scroll事件返回的功能debounce()而不是调用一个函数debounce()每一次？

Answer 1

在问了这个问题之后，我实际上找到了解决方案。

在我像这样声明debounce函数之前（只需对其加上别名，这样我就可以在模板内部访问它）：

methods: {
   debounce: debounceFromNPM
}

但是我将其更改为此并且它可以工作（不要为包“ debounce”加上别名，而是直接返回返回的debounced函数）：

debounce: debounceFromNPM(function () {
  this.onScrollMessages();
}, 3000)

并将模板更改为：

<div @scroll="debounce"></div>

请注意，如果您正在使用ES6箭头函数语法，具有词汇this是行不通：

// THIS DOESN'T WORK AS `this` WILL BE UNDEFINED
debounce: debounceFromNPM(() => {
  this.onScrollMessages();
}, 3000)