scrollイベントの負荷を減らす

scrollイベントを実行すると処理回数が多くて好きではありませんでした。
いろいろ調べて感じた事、結果どうしたかを書いてみます。

setIntervalを使った処理

var outerPane = $details.find(".details-pane-outer"),
    didScroll = false;
 
$(window).scroll(function() {
    didScroll = true;
});
 
setInterval(function() {
    if ( didScroll ) {
        didScroll = false;
        // Check your page position and then
        // Load in more results
    }
}, 250);

これをすると常時監視をする感じになるので、処理的にはどうなんだろうなぁと思いました。

間引きさせて実行する

var timer = null;
$(window).on('scroll',function() {
	clearTimeout( timer );
	timer = setTimeout(function() {
		//処理内容
	}, 300 );
});

これ、うまく動くんでしょうか・・・
私がやろうとするとスクロール中のイベントが重複処理になって、すごい速さで同じ処理を行おうとしてしまいました・・・。

スクロール時にフラグをたててしまう

私が今回ついた結論です。

var flug = true;
$(window).scroll(function(){
  if(flug){
    flug = false;
    setTimeout(function(){
      // ここに処理を書く
      flug = true;
      return flug;
    }, 200);
  }
});

上記の200という数字を変えれば、遅くも早くもできます。

簡単にいうと、
スクロールしたらボタンを押して、
ボタンが上がってくるまでスクロールしても押せませんよ。

という形ですね。

もう少し細かく言うと、

• flugがtrueのときにスクロール
  1. 最初にflugをfalseにしておく。
  2. 処理が250ms後に実行される。
  3. 処理が終わったらflugをtrueにもどす。
• flugがfalseのときにスクロール
  1. なにも処理されない。

おそらくresizeでも同じように処理の負担を減らせるのではないでしょうか。(scrollをresizeに変えるだけ)

---

まとめ

私はまだJavascriptの扱いが慣れていないので、これが正しいという見解ではありません。
あくまで個人的に組んでみた結果という感じです。

今回は、こういった方法をとりましたが、もっといい方法があるよ！とか、この方法おかしくない？とか、
あったら教えていただけたらうれしいです！