JavaScriptのイベントポーリングの頻度をどのように低くしますか?私が心配しているイベントは、onResizeとonScrollです。これらのイベントは、誰かがブラウザのサイズを変更したり、スクロールしたりすると、毎秒数十回トリガされます。これらのイベントは500ミリ秒ごとに1回しか発生しないようにしたいので、イベントハンドラを最適化してメモリをリークさせないように時間を費やす必要はありません。Javascriptイベントポーリングの頻度を低くする
答えて
var resizeTimeout;
window.onresize = function() {
if (resizeTimeout) {
clearTimeout(resizeTimeout);
}
resizeTimeout = setTimeout(function() {
// Do it!
}, 500);
});
人物のサイズ変更が完了してから、setTimeout()
機能がトリガーされます。
onscroll
バージョンは、あなたが本当にそれはだかどうかをチェック各後件1に、最初のイベントの発火の時間を覚えているようにイベントが発生するが、あなたが何かを行うことができますどのように頻繁に制御することはできません:)
非常に似ています最初のものから500ミリ秒以上が経過した場合 - イベントハンドラを続行します。それ以外の場合はイベントハンドラを終了します
+1この答えは、これはおそらくOPが望んでいるものです。ただし、最後のサイズ変更イベントを処理するには、追加のロジックが必要です。 – casablanca
私は、タイマーのソリューションが最後のサイズ変更イベントを処理すると思うので、実際のソリューションは2つの組み合わせになります – Andrey
ハンドラの開始時に、最後のものから500msが経過したかどうかを確認し、そうでなければ返す。
これらのイベントが発生するのを防ぐことはできません。彼らはいつもします。あなたがしたいことは、直ちに聞いてはいけないし、繰り返しを避けるためにイベントを処理することです。その後、setTimeoutの後にハンドラ全体が再び設定されます。誰かがウィンドウのサイズを変更しない限り、これ以上の再帰は起こりません。私はここで5000ミリメートルを使用しているので、コンソールで作業するのが簡単です。 spazのようにサイズを変更しても、5秒ごとにFFコンソールに複数のスパムが表示されるべきではありません。何にハンドラ火災はまだ技術的にハンドラとAN if文+検索を発射するたびに行うかどうかを判断するためのロジックを使用し
(function staggerListen(){
window.onresize = function(){
window.onresize = false;
console.log('spam');
setTimeout(staggerListen,5000);
};
})()
。それは重くなることがあります。
うわー。私は、リスナーのコールバックを動的に追加/削除するためのオーバヘッドが何であるか分かりませんが、とにかく難しいのは+1です。 :) – Phrogz
アンダースコアdebounce機能をチェックし
後のミリ秒は、それが呼び出された最後の時間から経過した待つまで、その実行を延期する渡された関数の新しいデバウンスバージョンを作成し、返します。入力の到着が停止した後にのみ実行されるべき動作を実装するのに役立ちます。たとえば、Markdownコメントのプレビューのレンダリング、ウィンドウのサイズ変更が停止した後のレイアウトの再計算などがあります。
例:
window.onscroll = _.debounce(
function() {
// do something
}, 500, false
);
私は受け入れ答えのようにそれを作るために使用されるが、問題はそれだけで指定されたタイムアウト後にトリガ、です。すぐにサイズ変更を処理するソリューションが必要でした。私がやったことがここにあります。
var _resize_is_busy = false;
var _resize_scheduled = false;
var _resize_precision = 100;
// This register for window resize events. No need to change anything.
$(window).resize(function() {
if (!_resize_is_busy) {
// call the scheduler who will do the work and set a timer to
// check of other resizes occured within a certain period of time
_resize_scheduler();
}
else {
// the resizer is busy, i.e. a resize have been handled a little
// time ago and then the scheduler is waiting some time before
// handling any other resize. This flag tells the scheduler that
// a resize event have been receive while he was sleeping.
_resize_scheduled = true;
}
});
// This is the scheduler. No need to change anything.
var _resize_scheduler = function() {
_resize_is_busy = true;
_resize_scheduled = false;
setTimeout(function() {
_resize_is_busy = false;
if (_resize_scheduled)
_handle_resize();
}, _resize_precision);
_handle_resize();
}
var _handle_resize = function() {
console.log('DOING ACTUAL RESIZE');
// do the work here
//...
}
これが役立ちます。
- 1. アンダースコアJavascript建物頻度グラフ
- 2. sqliteデータベースを開く頻度
- 3. pandas.dataframeから低い頻度の値を削除
- 4. 大量のアクセス頻度の低いデータセットのデータベースソリューション
- 5. hgプッシュの頻度が低い/冗長な通知
- 6. 頻度テーブル内の行サブセットの頻度
- 7. 生産のMongoDBでインデックスを作成する頻度と頻度
- 8. iOS 4.0でタッチイベントの頻度が低下するのはなぜですか?
- 9. オペレーティングシステムでデッドロックが発生する頻度(発生する頻度)
- 10. WPF MouseMoveイベントポーリング
- 11. Rで累積頻度と相対頻度で頻度表を作成する方法
- 12. mongoidでのインデックス作成:rake db:mongoid:create_indexesを実行する頻度と頻度
- 13. WaveInEventサンプルイベントの頻度
- 14. C配列内の2番目に出現頻度の低い要素
- 15. 整数の頻度を集計する
- 16. Androidマーケットで、開発者がapkファイルを更新する頻度/更新頻度
- 17. ピッカーの透明度を低く設定する+
- 18. スレッドでスレッドの優先度を低くする
- 19. Pythonプロット頻度fft.rfft
- 20. トラフィック・マネージャーがエンドポイントをモニターする頻度
- 21. PysparkでのNgram頻度ランキング
- 22. の制御ポーリング頻度
- 23. 「iPhoneアプリ」を評価する頻度はどのくらいですか?
- 24. 同時にいくつかのグループのカウント頻度
- 25. リスト<Integer>ではなくint []内のアイテムの頻度?
- 26. Np硬度低下
- 27. パンダ:棒グラフxtick頻度
- 28. 計算ドキュメント頻度[ジャワ]
- 29. SpriteBatch.Begin()/ End()を呼び出す頻度。
- 30. GCM RegistrationIntentServiceを呼び出す頻度
この1つは500 msごとに発火しません。停止/ポーズリサイズした後には500 msだけ発火します – Andrey
+1は私にそれを打ちます。 'resizeTimeout'のチェックは最初のラウンドで'未定義 'になるので、忘れないでください。 – casablanca
@Andrey:良い点 - 私はそれを見落としました。 – casablanca