スクロールイベントの頻度を減らす方法
スクロールイベントは便利ですが、発火する頻度が高すぎてブラウザに負担がかかってしまうかもしれません。スクロールイベントによる処理回数を間引くには、setTimeout()を利用しましょう。
サンプルコード
500msに1回の頻度で処理を行なうサンプルコードです。頻度を調節するには、500
の数値を変更して下さい。
var timeoutId ;
window.addEventListener( "scroll", function () {
// setTimeout()がセットされていたら無視
if ( timeoutId ) return ;
timeoutId = setTimeout( function () {
timeoutId = 0 ;
// 処理内容
}, 500 ) ;
} ) ;
デモ
スクロール中にカウントアップするイベントを設定しました。count1には頻度を減らした場合の処理回数、count2は通常の頻度の処理回数が代入されます。違いを確認しましょう。
var timeoutId ;
var count1 = 0 ;
var count2 = 0 ;
window.addEventListener( "scroll", function () {
// 通常のスクロールイベント (比較用)
++count2 ;
// setTimeout()がセットされていたら無視
if ( timeoutId ) return ;
timeoutId = setTimeout( function () {
timeoutId = 0 ;
// 処理内容
++count1 ;
}, 500 ) ;
} ) ;
count1 = 0
count2 = 0
関連記事
- スクロールをする方法
- 絶対的、相対的に位置を指定して、スクロールします。
- スクロール量を取得する方法
- スクロール量を取得するには、window.pageYOffsetを参照しましょう。
- クリックした位置を取得する方法
- マウスでクリックした位置を取得するには、eventオブジェクトのpageX、pageYを参照します。
- タッチした位置を取得する方法
- スマホなどでタッチした位置座標を取得します。
- リサイズイベントの頻度を減らす方法
- リサイズイベントの頻度を減らすには、setTimeout()で発火するタイミングを調節します。
- スクロール終了時に処理を実行する方法
- スクロールを停止したタイミングで処理を実行するには、setTimeout()を利用します。