JavaScript 関数のスロットルと関数のデバウンスに関するナレッジ ポイントを学習する

この記事では、JavaScript 関数のスロットリングと関数のデバウンスに関連する知識ポイントを共有します。必要な場合は、学習して参照してください。

コンセプト

スロットル (スロットル) は、関数が頻繁に実行されるのを防ぎ、実行が速すぎる呼び出しを減らします。 Throttle

Debounce (デバウンス) デバウンスとは、一定時間連続した関数呼び出しを 1 回だけ実行することです。

#throttle アプリケーション シナリオ

• DOM要素のドラッグ機能(mousemove)の実装

• シューティングゲームのマウスダウン/キーダウンイベント(単位時間あたり1発のみ発射可能)

• マウスの移動距離を計算する (mousemove)

• Canvas は製図板機能をシミュレートします (mousemove

• 検索) Lenovo (keyup

• スクロール イベントをリッスンして、ページの下部に到達したときに自動的にさらに読み込むかどうかを決定します。スクロールにデバウンスを追加した後、ユーザーがスクロールを停止したときにのみ決定されますページの下部に到達したかどうか。スロットルの場合は、ページがスクロールするたびに 1 回判定されます。

  
  

デバウンス アプリケーション シナリオ

サイズ変更/スクロールが統計イベントをトリガーするたびに

テキスト入力の検証 (継続的なテキスト入力後に検証のための AJAX リクエストを送信します。検証は 1 回だけです)

関数 debounce の実装

スクロール イベントを例として、ウィンドウがスクロールされていない場合、またはデバウンスされていない場合に hello world 文字列を出力する方法を検討します。

window.onscroll = function () {
 console.log('hello world');
}

このように、ウィンドウがスクロールされるたびに、実際には、複数の hello world が出力されます。関数 debounce の背後にある考え方は、一部のコードを中断せずに継続的に実行できないということです。指定された時間間隔後にこの関数が呼び出されると、前のタイマーがクリアされ、別のタイマーが設定されます。ただし、前のタイマーがまだ実行されていない場合、この操作は意味を持ちません。これは実際にはそれを置き換えるものであり、その目的は、リクエストが一定期間停止した後にのみ関数を実行することです。

「Height Three」は、最も簡潔で古典的なデバウンス コードを提供します。

function debounce(method, context) {
 clearTimeout(method.tId);
 method.tId = setTimeout(function() {
 method.call(context);
 }, 1000);
}

function print() {
 console.log('hello world');
}

window.onscroll = function() {
 debounce(print);
};

さらに変更を加えます

function debounce(delay, action) {
 var tId;
 return function () {
  var context = this;
  var arg = arguments;
  if (tId) clearTimeout(tId);
  tId = setTimeout(function () {
   action.apply(context, arg);
  }, delay);
 }
}

window.onscroll = debounce(1000, print);

関数スロットルの実装

関数スロットルとは、継続的に実行される関数を一定期間内に断続的に実行できることを意味します。

タイムスタンプを使用してコールバックの実行時刻が到来したかどうかを判断し、最後の実行のタイムスタンプを記録し、イベントがトリガーされるたびにコールバックを実行し、現在のタイムスタンプ間の距離を判断します。コールバック内のタイムスタンプ。実行タイムスタンプの時間間隔に * があるかどうか。ある場合は、実行し、最後の実行のタイムスタンプを更新します。

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

2 番目の方法は、タイマーを使用することです。たとえば、スクロール イベントが最初にトリガーされるときに hello world を出力し、その後スクロール イベントがトリガーされるたびに 1000 ミリ秒のタイマーを設定します。すでにタイマーが存在する場合、コールバックはトリガーされます。タイマーが開始され、ハンドラーがクリアされてからタイマーがリセットされるまで、コールバックはメソッドを実行しません。

var throttle = function(delay, action) {
 var timeout;
 var later = function () {
  timeout = setTimeout(function(){
   clearTimeout(timeout);
   // 解除引用
   timeout = null;
  }, delay);
 };
 later();
 if (!timeout) {
  action.apply(this, arguments);
  later();
 }
}

更新方法:

function throttlePro(delay, action) {
 var tId;
 return function () {
  var context = this;
  var arg = arguments;
  if (tId) return;
  tId = setTimeout(function () {
   action.apply(context, arg);
   clearTimeout(tId);
   // setTimeout 返回一个整数，clearTimeout 之后，tId还是那个整数,setInterval同样如此
   tId = null;
  }, delay);
 }
}

上記はこの章の全内容です。その他の関連チュートリアルについては、

JavaScript ビデオ チュートリアルをご覧ください。

以上がJavaScript 関数のスロットルと関数のデバウンスに関するナレッジ ポイントを学習するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。