Question

我正在尝试使用带有Vue.js v-on:scroll绑定的debounce包，如下所示：

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

问题是debounce实际上返回了要使用的去抖动函数，但是以这种方式绑定事件实际上会调用debounce(onScrollMessages, 200)每个滚动事件，这意味着将会计算去抖函数并且< strong>创建每个滚动事件。

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

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

但是，为了使debounced函数只计算一次，它应该绑定事件，如下所示：

// 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
}

但是我把它改成了这个并且它有效（不要对包裹进行别名＆＃34; debounce＆＃34;，但直接退回去抖动功能）：

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)

Vue.js去抖动卷轴

1 个答案: