Vue.js 去抖滚动

Question

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

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

问题是 debounce 实际上 returns 要使用的去抖动函数，但是以这种方式绑定事件实际上会调用 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"，而是直接返回的去抖函数）：

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 去抖滚动

Vue.js debounce scroll

javascript

vue.js

debounce