【javaScript】setTimeoutを使ってレイアウト回数を制限する方法

asaba 著者:asaba

【javaScript】setTimeoutを使ってレイアウト回数を制限する方法

今回はスクロール時の負荷を軽減させる方法について紹介します。

javascriptにおけるスクロール動作はonScrollで監視することができるのですが、スクロール自体はマウスホイールを動かしている時は

処理を制限することはできません。そのためマウスホイールを一回転させただけでスコープ内の処理全般を一から始めてしまい

これが重なることによってwebページに負荷がかかりスクロール中に突然落ちたり固まってしまうことがあります。

特にリサイズや位置情報など計算を多用するアプリにとってはこれが結構痛く、内処理で途轍もない負担をかけてしまいます。

目では見取れないですがスクロール数を考えると相当負担かけてしまっているのが分かりますね・・・。

どうにかしてスクロール時のレイアウト回数を減らしたいと思い探し続けた結果、setTimeoutで○○秒後までは処理を行わないメソッド

を使い制御をする手段に行きつきました。

シンプルですが、処理が膨大でない限りはこの手順で約束された勝利の動作をしてくれるはずです。


var interval = 500;
var timer;</pre>
clearTimeout(timer);
timer = setTimeout(function(){
//ここに処理を書く
}

}, interval);
<pre>

 

 

  • この記事いいね! (0)

著者について

asaba

asaba author

好きなもの:RPG、チョコミント 少しずつ頑張ります。