8

Javascript イベント ポーリングの頻度を下げるにはどうすればよいですか? 気になるイベントはonResizeとonScroll. これらのイベントは、誰かがブラウザのサイズを変更したり、下にスクロールしたりすると、1 秒間に数十回トリガーされる可能性があります。これらのイベントが 500 ミリ秒ごとに 1 回だけ発生するようにしたいので、イベント ハンドラーを最適化したり、メモリ リークが発生しないようにしたりするのに何時間も費やす必要はありません。

4

6 に答える 6

11 
var resizeTimeout;

window.onresize = function() {
    if (resizeTimeout) {
        clearTimeout(resizeTimeout);
    }
    resizeTimeout = setTimeout(function() {
        // Do it!
    }, 500);

});

setTimeout()これにより、ユーザーがサイズ変更を終了してから約500ms後に機能がトリガーされます。

onscrollバージョンは非常に似ています:)

于 2010-12-07T02:08:21.220 に答える
5

イベントが発生する頻度を実際に制御することはできません。最初のイベントの発生時刻を覚えてから、その後の各イベントで、最初のイベントから500ミリ秒以上経過しているかどうかを確認します。発生している場合は、イベントを続行します。ハンドラー、それ以外の場合は、イベントハンドラーを終了します

于 2010-12-07T02:08:38.590 に答える
1

ハンドラーの最初で、最後のハンドラーから500ミリ秒が経過したかどうかを確認し、経過していない場合は戻ります。

于 2010-12-07T02:10:37.133 に答える
1

アンダースコアデバウンス機能を確認してください

渡された関数の新しいデバウンスされたバージョンを作成して返します。この関数は、最後に呼び出されてから待機ミリ秒が経過するまで実行を延期します。入力の到着が停止した後にのみ発生する動作を実装するのに便利です。例：Markdownコメントのプレビューのレンダリング、ウィンドウのサイズ変更が停止した後のレイアウトの再計算など。

例：

window.onscroll = _.debounce(
  function() {
      // do something
  }, 500, false
);
于 2012-12-03T11:17:22.697 に答える
1

これらのイベントの発生を防ぐことはできません。彼らはいつもそうします。あなたがしたいことは、すぐに聞くのをやめてから、繰り返しを避けるためにイベントを処理することです. 次に、setTimeout の後でハンドラー全体が再度セットアップされます。誰かがウィンドウのサイズを変更しない限り、再帰は発生しません。ここでは 5000 ミリ秒を使用します。これは、コンソールでの動作が見やすいためです。スパズのようにサイズを変更しても、FF コンソールに 5 秒ごとに複数のスパムが表示されることはありません。

(function staggerListen(){
  window.onresize = function(){
    window.onresize = false;
    console.log('spam');
    setTimeout(staggerListen,5000);
  };
})()

ロジックを使用して、ハンドラーが起動するたびに何かを行うかどうかを決定することは、技術的にはハンドラーと if ステートメント + ルックアップを起動することです。それは重くなることができます。

于 2010-12-07T03:19:13.253 に答える