デバウンス機能とスロットル機能の実装原理-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

デバウンス機能とスロットル機能の実装原理

不言

Jul 13, 2018 pm 04:42 PM

html5 javascript node.js

この記事では、デバウンス機能とスロットル機能の実装原理を主に紹介します。これは、必要な友人と共有することができます

スロットル。スロットルとデバウンスはどちらも、実際のロジック処理の実行を減らすことによってイベント処理関数の実行パフォーマンスを向上させる方法です。スロットルはイベントトリガーの数を大幅に削減しません。
debounce は関数を一定期間内に 1 回だけ実行するように強制するのに対し、throttle は関数を固定レートで実行するように強制します。これらにより、頻繁にトリガーされる DOM イベントを処理する際のユーザーエクスペリエンスが大幅に向上します。

どれくらいの頻度ですか？ 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)
  }
}

ログイン後にコピー

debounce はクロージャを返しますが、このクロージャは引き続き継続的かつ頻繁に呼び出されますが、クロージャ内では元の関数 fn の実行が制限されており、連続操作が停止した後に fn が 1 回だけ実行されるように強制されます。

スロットル

スロットルの概念は理解しやすいです。つまり、関数が実行される速度を固定すること、いわゆる「スロットル」です。通常

/**
*
* @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

ログイン後にコピー

この2つを適用すると、効率に直結します。デバウンスとスロットルの違いがまだ完全に理解できない場合は、このページにアクセスして 2 つの視覚的な比較を確認してください。

デバウンス機能とスロットル機能の実装原理上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。