2

次のように 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()

4

1 に答える 1