この記事では、デバウンス機能とスロットル機能の実装原理を主に紹介します。これは、必要な友人と共有することができます
どれくらいの頻度ですか? Mousemove を例に挙げると、DOM レベル 3 の規定によれば、「マウスが連続的に移動する場合、ブラウザは内部タイマーの場合、ユーザーの動作に基づいて複数の連続する Mousemove イベントをトリガーする必要があります。」ということになります。マウスの移動速度により、mousemove イベントがトリガーされます。 (もちろん、「スワイプ」など、マウスを十分に速く動かした場合、ブラウザはこのイベントをトリガーしません)。サイズ変更、スクロール、キー*などのイベントも同様です。
1. デバウンス関数の機能は、関数が複数回呼び出される場合でも、一定の継続時間内に 1 回だけ実行されるように強制することです。ユーザーの操作中にブラウザがイベントをトリガーするたびにリスニング関数を実行するのではなく、ユーザーが一定期間操作を停止した後に対応するリスニング関数が実行されることを希望します。
function debounce(fn, delay) { // 定时器,用来 setTimeout var timer // 返回一个函数,这个函数会在一个时间区间结束后的 delay 毫秒时执行 fn 函数 return function () { // 保存函数调用时的上下文和参数,传递给 fn var context = this var args = arguments // 每次这个返回的函数被调用,就清除定时器,以保证不执行 fn clearTimeout(timer) // 当返回的函数被最后一次调用后(也就是用户停止了某个连续的操作), // 再过 delay 毫秒就执行 fn timer = setTimeout(function () { fn.apply(context, args) }, delay) } }
スロットル
スロットルの概念は理解しやすいです。つまり、関数が実行される速度を固定すること、いわゆる「スロットル」です。通常/**
*
* @param fn {Function} 实际要执行的函数
* @param delay {Number} 执行间隔,单位是毫秒(ms)
*
* @return {Function} 返回一个“节流”函数
*/
function throttle(fn, threshhold) {
// 记录上次执行的时间
var last
// 定时器
var timer
// 默认间隔为 250ms
threshhold || (threshhold = 250)
// 返回的函数,每过 threshhold 毫秒就执行一次 fn 函数
return function () {
// 保存函数调用时的上下文和参数,传递给 fn
var context = this
var args = arguments
var now = +new Date()
// 如果距离上次执行 fn 函数的时间小于 threshhold,那么就放弃
// 执行 fn,并重新计时
if (last && now
上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。
関連する推奨事項:
JavaScript での関数のオーバーロードに関する手順 JavaScript で HTTP リクエストを作成する方法を使用する以上がデバウンス機能とスロットル機能の実装原理の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。