ホームページ > 記事 > ウェブフロントエンド > JS 関数のスロットルと手ぶれ補正の例の詳細な説明

JS 関数のスロットルと手ぶれ補正の例の詳細な説明

小云云オリジナル: 2018-01-09 15:08:362200ブラウズ

この記事では主に JS 関数のスロットリングとアンチシェイクについて紹介します。興味のある方は、ぜひ参考にしてください。

フロントエンド開発では、一部のユーザーの動作によってイベントの実行が頻繁にトリガーされ、DOM 操作やリソースの読み込みなどのパフォーマンスを消費する処理により、インターフェイスのフリーズやブラウザのクラッシュが発生する可能性があります。関数スロットル (スロットル) と関数デバウンス (デバウンス) は、同様のニーズを解決するために生まれました。

関数のスロットリング(スロットル)

関数のスロットルとは、関数が実行サイクル以上の場合にのみ実行されるようにスケジュールし、サイクル内の呼び出しは実行されません。水滴が一定の重さまで溜まると落ちるのと同じです。

シナリオ:

ウィンドウのサイズ変更 (サイズ変更)
ページのスクロール (スクロール)
クレイジークリックの購入 (マウスダウン)

実装:

function throttle(method, delay){
  var last = 0;
  return function (){
    var now = +new Date();
    if(now - last > delay){
      method.apply(this,arguments);
      last = now;
    }
  }
}

document.getElementById(&#39;throttle&#39;).onclick = throttle(function(){console.log(&#39;click&#39;)},2000);

アンダースコアの実装:

_.throttle = function(func, wait, options) {
  var context, args, result;
  var timeout = null;
  var previous = 0;
  if (!options) options = {};
  var later = function() {
    previous = options.leading === false ? 0 : _.now();
    timeout = null;
    result = func.apply(context, args);
    if (!timeout) context = args = null;
  };
  return function() {
    var now = _.now();
    if (!previous && options.leading === false) previous = now;
    //计算剩余时间
    var remaining = wait - (now - previous);
    context = this;
    args = arguments;
    //剩余时间小于等于0或者剩余时间大于等待时间(本地时间变动出现)
    if (remaining <= 0 || remaining > wait) {
      if (timeout) {
        clearTimeout(timeout);
        timeout = null;
      }
      previous = now;
      result = func.apply(context, args);
      if (!timeout) context = args = null;
    } else if (!timeout && options.trailing !== false) {
      timeout = setTimeout(later, remaining);
    }
    return result;
  };
};

関数デバウンス (デバウンス)

関数デバウンスとは、関数を頻繁にトリガーする必要がある場合に、十分な空き時間があるときに関数が 1 回だけ実行されることを意味します。バスの運転手さんは全員がバスに乗り込むのを待ってからバスを降りるようです。

シナリオ:

リアルタイム検索 (キーアップ)
ドラッグアンドドロップ (マウス移動)

実装:

function debounce(method, delay){
  var timer = null;
  return function(){
    var context = this,args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function(){
      method.apply(context, args);
    },delay);
  }
}

document.getElementById(&#39;debounce&#39;).onclick = debounce(function(){console.log(&#39;click&#39;)},2000);

アンダースコア実装:

_.debounce = function(func, wait, immediate) {
  var timeout, args, context, timestamp, result;
  var later = function() {
    var last = _.now() - timestamp;
    if (last < wait && last >= 0) {
      timeout = setTimeout(later, wait - last);
    } else {
      timeout = null;
      if (!immediate) {
        result = func.apply(context, args);
        if (!timeout) context = args = null;
      }
    }
  };
  return function() {
    context = this;
    args = arguments;
    timestamp = _.now();
    var callNow = immediate && !timeout;
    if (!timeout) timeout = setTimeout(later, wait);
    if (callNow) {
      result = func.apply(context, args);
      context = args = null;
    }
    return result;
  };
};

機能スロットルと機能デバウンスは、論理演算を遅延させることでパフォーマンスを向上させる方法であり、フロントエンドの最適化における一般的で重要なソリューションです。概念と実際のアプリケーションから 2 つの違いを理解し、必要に応じて適切な方法を選択できます。

JS 関数のスロットルと手ぶれ補正の例の詳細な説明

関連記事