debounceこれは、関数の実行頻度を制限する手法です。イベントがトリガーされた後、一定期間関数の実行を遅らせることができます。この時間内にイベントが再度トリガーされると、前のタイマーはクリアされて再起動されます。これにより、関数の実行時間を効果的に制御し、頻繁な実行を回避できます。
debounce原理は、setTimeoutsumclearTimeout関数を使用してタイマーによって関数の実行を遅らせ、指定された時間内に前のタイマーをクリアして関数呼び出しの制御を実現することです。
Vue で使用するとdebounce、関数がトリガーされるたびに、前のタイマーがキャンセルされ、一定期間再計測され、一定時間内に関数が再度トリガーされなかった場合にのみ、関数が実際に実行されます。これにより、ユーザーが高速に操作する場合に頻繁に関数が呼び出されてページがフリーズするなどの問題を回避できます。
では、Vue でそれを使用する方法を見てみましょうdebounce。
-
まず、Lodash ライブラリをインストールします。Lodash は、よく使用される多くのメソッドと関数を提供する JavaScript ユーティリティ ライブラリです
debounce。npmやyarnなどのパッケージマネージャーを使用してインストールできます。
npm install --save lodash
-
使用する必要があるコンポーネントに Lodash ライブラリを導入し、
_変数に代入します。
import _ from 'lodash'
-
使用する必要があるメソッドでは
debounce、_.debounceメソッドを関数でラップします。例えば：
methods: {
search: _.debounce(function() {
// 搜索逻辑
}, 500)
}
上記の例では、searchメソッドの実行は 500 ミリ秒遅れます。この間にメソッドが再度呼び出される場合、最後の呼び出しはキャンセルされて再開されます。
簡単なdebounce関数の実装は次のとおりです。
function debounce(func, delay) {
let timer = null;
return function() {
const context = this;
const args = arguments;
clearTimeout(timer);
timer = setTimeout(function() {
func.apply(context, args);
}, delay);
};
}
この実装では、クロージャを使用して変数を保存しtimer、タイマーの ID を記録します。呼び出されるたびに、前のタイマーがクリアされ、新しいタイマーがリセットされ、一定の時間遅延の後に受信関数が実行されます。
Vue での実装debounceも同様で、ソース コードは次のとおりです (Vue 公式ドキュメントからの抜粋)。
// from Vue.js 2.x source code
function _createFnInvoker(fn) {
function invoker() {
const args = arguments;
const vm = invoker.vm;
if (vm._isMounted) {
// 如果已经挂载，则立即执行传入的函数
return fn.apply(vm, args);
}
// 否则将函数作为一个 watcher 加入到队列中等待执行
vm.$nextTick(() => {
if (!invoker.canceled) {
fn.apply(vm, args);
}
});
}
invoker.cancel = () => {
invoker.canceled = true;
};
return invoker;
}
export function debounceAndMerge(fn) {
const invoker = _createFnInvoker(fn);
return function(...args) {
// 每次被触发时，都取消之前的计时器
invoker.cancel();
// 使用 setTimeout 延迟执行函数
window.setTimeout(() => {
invoker.apply(invoker, args);
}, 0);
};
}
Vue の関数debounceAndMergeも同様の方法で実装され、クロージャを使用して関数呼び出しの状態を保存します。トリガーされるたびに、以前に設定されたタイマーが最初にキャンセルされ、一定期間の遅延後に受信した関数を実行するように新しいタイマーが設定されます。この時間内に機能が再度トリガーされると、前のタイマーはキャンセルされ、タイマーはリセットされます。
debounceAndMergeVue で使用する場合、実行関数を直接呼び出すのではなく、受信関数がウォッチャーにカプセル化され、実行のためにキューに追加されることに注意してください。これは、Vue が応答性の原則に基づいたフレームワークであり、データが変更された後にビューを再レンダリングする必要があるためです。そのため、関数をウォッチャーにカプセル化することで、データが更新された後に対応する操作が確実に実行されるようにすることができます。予期せぬ事態を避ける。