JavaScript関数の手ぶれ防止と節流

関数の手ぶれ防止とスロットルは高周波動作トリガのコールバック関数の最適化であり、達成方法には類似点がある。まず使用シーンから区分します。
手ぶれ防止使用シーン：

フォーム入力ブロック検証

提出ボタンの重複提出を避ける

スロットル使用シーン：

scroll、mousemove、resizeなど

関数ジッパー(debounce)
フォーム入力ボックスのチェックは、ユーザが絶え間なく入力している間、バックグラウンドにテキストを確認する必要はありません。ユーザが一定の時間停止した後に、デフォルトのユーザが入力しました。バックグラウンドにテキストの提出を開始します。
フォームの提出ボタンがユーザによって何度も連続してクリックされた場合、明らかに毎回クリックしてフォームを提出する必要はないです。ユーザがクリックしない限り、最後のクリック操作を実行すればいいです。
手振れ防止機能の適用シーンには共通の特徴があります。高周波トリガはすぐに高周波では実行されません。高周波トリガを終了してから一定時間間隔後に最後のトリガを実行します。
コードの実現は簡単です。短時間高周波トリガはタイマーをリセットし、タイマーが指定時間に達したら、コールバック関数を実行しました。

var debounce = function (func, wait) {
  var timer;
  return function () {
    var self = this, args = arguments;
    if (timer) clearTimeout(timer);
    timer = setTimeout(function () {
      func.apply(self, args);
    }, wait);
  }
}
/**
              ，                 。apply         this        ，  setTimeout  this  window。
*/

関数の流れ
トリガ周波数が高いシーンでは、通常は同じ高周波でのコールバック関数の実行が必要ではないが、この場合は人工的な制御コールバック関数の実行周波数が必要となり、固定的な低周波で実行される。
実施の原理は、最初のトリガ時間を記録した後、トリガ毎に指定された間隔時間に到達するか否かを比較し、指定された間隔以上の間隔で再度実行し、記録トリガ時間を再開始することである。
タイムスタンプで記録して時間間隔を算出しても良いし、タイマーで時間間隔を制御しても良いです。

var throttle = function (func, wait) {
  var timer;
  return function () {
    var self = this, args = arguments;
    if (!timer) {
      timer = setTimeout(function () {
        func.apply(self, args)
        clearTimeout(timer)
        timer = null;
      }, wait)
    }
  }
}

最後に、手振れ防止と節流関数の実行周波数を一枚の図で比較する。可視化の実現。

以上はJavaScript関数の手ぶれ防止と節流の詳細を分析しました。JavaScript関数の手ぶれ防止と節流に関する資料について、他の関連記事に注目してください。