今回はスクロール時の負荷を軽減させる方法について紹介します。
javascriptにおけるスクロール動作はonScrollで監視することができるのですが、スクロール自体はマウスホイールを動かしている時は
処理を制限することはできません。そのためマウスホイールを一回転させただけでスコープ内の処理全般を一から始めてしまい
これが重なることによってwebページに負荷がかかりスクロール中に突然落ちたり固まってしまうことがあります。
特にリサイズや位置情報など計算を多用するアプリにとってはこれが結構痛く、内処理で途轍もない負担をかけてしまいます。
目では見取れないですがスクロール数を考えると相当負担かけてしまっているのが分かりますね・・・。
どうにかしてスクロール時のレイアウト回数を減らしたいと思い探し続けた結果、setTimeoutで○○秒後までは処理を行わないメソッド
を使い制御をする手段に行きつきました。
シンプルですが、処理が膨大でない限りはこの手順で約束された勝利の動作をしてくれるはずです。
var interval = 500;
var timer;</pre>
clearTimeout(timer);
timer = setTimeout(function(){
//ここに処理を書く
}
}, interval);
<pre>
