リサイズイベントの頻度を減らす方法
リサイズイベントは発火する頻度が高く、処理内容によってはブラウザに負担がかかります。イベントの処理回数を間引くには、setTimeout()を利用しましょう。
サンプルコード
500msに1回の頻度で処理を行なうサンプルコードです。頻度を調節するには、500
の数値を変更して下さい。
var timeoutId ;
window.addEventListener( "resize", function () {
// setTimeout()がセットされていたら無視
if ( timeoutId ) return ;
timeoutId = setTimeout( function () {
timeoutId = 0 ;
// 処理内容
}, 500 ) ;
} ) ;
デモ
リサイズ中にカウントアップするイベントを設定しました。count1には頻度を減らした場合の処理回数、count2は通常の頻度の処理回数が代入されます。
var timeoutId ;
var count1 = 0 ;
var count2 = 0 ;
window.addEventListener( "resize", function () {
// 通常のリサイズイベント (比較用)
++count2 ;
// setTimeout()がセットされていたら無視
if ( timeoutId ) return ;
timeoutId = setTimeout( function () {
timeoutId = 0 ;
// 処理内容
++count1 ;
}, 500 ) ;
} ) ;
count1 = 0
count2 = 0
関連記事
- リサイズ中か否かを判定する方法
- ユーザーがリサイズ中か否かを判定するには、resizeイベントとsetTimeout()を利用します。
- 回転ジェスチャーを検出する方法
- タッチデバイスの回転ジェスチャーで画像を回転させます。
- ラジアンを度に変換する方法
- 単位をラジアンから度に変換するには、値に180/Math.PIをかけましょう。
- スクロールイベントの頻度を減らす方法
- スクロールイベントの頻度を減らすには、setTimeout()で発火するタイミングを調節します。
- リサイズ終了時に処理を実行する方法
- リサイズを停止したタイミングで処理を実行するには、setTimeout()を利用します。