0

jQueryプラグインをまとめています。プラグインはパネルを取り、その高さを自動調整します。だから私はこのようなものから始めます：

<div class="panel">Test 1</div>
<div class="panel">Test 2</div>
<div class="panel">Test 3</div>

そのためのコードは次のようになります。

    sizePanels: function(){
      panels.each(function(){
        $(this).height(docHeight);
      });
    },

クリックすると、次の $(".panel) に移動する下向きのボタンがあります。

nextPanel: function(){
  $.scrollTo($(".panel:eq(" + panelIndex + ")"), 250, { easing: "swing" });
}

それで、私は彼らがオンになっているパネルインデックスを追跡しています:

    if (panelIndex < (panelCount - 1) ) {
      panelIndex += 1;
    }

手動でスクロールするかどうかを追跡し、要素の1つを渡して「panelIndex」を増やして、ボタンが下ではなく上に移動しないようにする方法を見つけようとしています。ユーザーがボタンの代わりにスクロールバーを使用したため、適切にインクリメントされました。これは私がこれまでに持っているものです:

   $(window).scroll(function(){
    panels.each(function(index){
      if ($(window).scrollTop() > $(this).scrollTop()) { 
        panelIndex = index; 
        // console.log(index);
      }
    });

    if (panelIndex < panelCount - 1){
      s.showDownButton();
    }
  });

コードは過度にチェックし、やややりすぎのように感じます。それを行うより良い方法はありますか？

4

1 に答える 1

1

簡単な最適化は、scrollTop を 1 回だけ計算し、一致が見つかったときに each ループを終了することです。false を返すことで $.each ループを終了できます。

$(window).scroll(function(){
    var scrollTop = $(window).scrollTop();
    panels.each(function(index){
        if (scrollTop > $(this).scrollTop()) { 
            panelIndex = index; 
        } else {
            return false;
        }
    });

    if (panelIndex < panelCount - 1){
        s.showDownButton();
    }
});

これを最適化するために私が提案する次の方法は、ページの読み込み時 (およびビューポートのサイズ変更時) に各パネルの scrollTop を事前に計算することです。これらの値を配列に格納すると、非常に迅速にループできます。

アイデアを説明するための大まかなコードを次に示します。

var panelTops = [];

findPanelTops(); // calculate on load
$(window).on("resize", findPanelTops); // calculate on resize

function findPanelTops() {
    panelTops = [];
    panels.each(function(index) {
        panelTops.push($(this).scrollTop());
    });
}

$(window).scroll(function(){
    var scrollTop = $(window).scrollTop();
    for (var i = 0; i < panelTops.length; i++) {
        if (scrollTop > panelTops[i]) { 
            panelIndex = i;
        } else {
            break;
        }
    };

    if (panelIndex < panelCount - 1){
        s.showDownButton();
    }
});

スクロール イベントは非常に短時間で大量に発生する可能性があるため、計算量をできるだけ最小限に抑える必要があります。このすべてを回避する 1 つの方法は、scrollend ハンドラーを実装することです。これは、スクロール イベントが停止したように見える場合にのみ発生します。

これを行うための基本的なコードを次に示します。スクロール イベントが 500 ミリ秒以上停止したときに発生します。

var scrollTimeout = null;

function onScroll() {
    if (scrollTimeout) {
        clearTimeout(scrollTimeout);
    }
    scrollTimeout = setTimeout(onScrollEnd, 500);
}

function onScrollEnd() {
    // Scrolling has stopped
    // Do stuff ...

   scrollTimeout = null;
}

$(window).on("scroll", onScroll);
于 2012-05-15T05:03:48.047 に答える