2

我正在尝试将debounce包与 Vue.jsv-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()

4

1 回答 1

5

在问了这个问题后，我实际上想出了解决方案。

在我debounce像这样声明函数之前（只是给它起别名，以便我可以在模板中访问它）：

methods: {
   debounce: debounceFromNPM
}

但是我把它改成了这个并且它可以工作（不要给包“debounce”起别名，而是直接返回返回的去抖函数）：

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)
于 2017-02-20T14:53:16.427 回答