1. yoshiiiiie

    Posted

    yoshiiiiie
Changes in title
+scrollの負荷を減らす
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,85 @@
+# 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の扱いが慣れていないので、これが正しいという見解ではありません。
+あくまで個人的に組んでみた結果という感じです。
+
+今回は、こういった方法をとりましたが、もっといい方法があるよ!とか、この方法おかしくない?とか、
+あったら教えていただけたらうれしいです!