8

これは、 に対する私の理解度のチェックですrequestAnimationFrame。ウィンドウのサイズが変更されるたびに DOM インタラクションを行っており、ブラウザーに過負荷をかけたくないため、デバウンス機能が必要です。典型的なデバウンス関数は、渡された関数を間隔ごとに 1 回だけ呼び出します。間隔は通常、2 番目の引数です。多くの UI 作業では、ブラウザが過負荷にならない最短の時間が最適な間隔であると想定しています。それがまさに何requestAnimationFrameをするかだと私には思えます:

var debounce = function (func, execAsap) {
   var timeout;

  return function debounced () {
    var obj = this, args = arguments;
    function delayed () {
      if (!execAsap)
        func.apply(obj, args);
      timeout = null; 
    };

    if (timeout)
      cancelAnimationFrame(timeout);
    else if (execAsap)
      func.apply(obj, args);

    timeout = requestAnimationFrame(delayed); 
  };
}

上記のコードは上記のdebounceリンクからの直接のぼったくりですが、setTimeout の代わりに requestAnimationFrame が使用されています。私の理解では、これは渡された関数をできるだけ早くキューに入れますが、ブラウザーが処理できるよりも速く着信する呼び出しはドロップされます。これにより、可能な限りスムーズな対話が生成されます。私は正しい軌道に乗っていますか?それとも私は誤解していrequestAnimationFrameますか?

(もちろん、これは最新のブラウザーでのみ機能しますが、setTimeout にフォールバックする requestAnimationFrame の簡単なポリフィルがあります。)

4

1 に答える 1