Vue.js дребезг прокрутка

Question

Я пытаюсь использовать debounce пакет с Vue.js v-on:scroll связывания следующим образом:

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

Проблема заключается в том, что на самом деле debounce возвращает функцию противодребезговой защиты можно использовать, но привязки событие таким образом на самом деле вызовет debounce(onScrollMessages, 200) каждое событие прокрутки, это означает, что функция debounced будет вычислена, и создаст каждое событие прокрутки.

Действительная проблема в том, что @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: 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)