Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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という数字を変えれば、遅くも早くもできます。

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

という形ですね。

もう少し細かく言うと、

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

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


まとめ

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

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away