腳本向下滾動javascript問題

我有一個JavaScript腳本，加載頁面上的更多信息向下滾動。問題是，當我向下滾動腳本執行兩次，我有相同的結果兩次或甚至更多。腳本向下滾動javascript問題

我想在每次向下滾動時執行一次腳本，而不是每次執行兩次或更多次。

這是腳本：從jquery的文檔「一」的

$(window).scroll(function(){ 
 
\t \t \t 
 
     var lastID = $('.load-more').attr('lastid'); 
 
     if ($(window).scrollTop() == $(document).height() - $(window).height() && lastID != 0){ 
 
      $.ajax({ 
 
       type:'POST', 
 
       url:'getdata.php', 
 
       data:'id='+lastID, 
 
       beforeSend:function(html){ 
 
        $('.load-more').show(); 
 
       }, 
 
       success:function(html){ 
 
        $('.load-more').remove(); 
 
        $('#list').append(html); 
 
       } 
 
      }); 
 
     } 
 
    }); 
 
\t \t

來源

2017-08-29 Dilak

試試這個

var counter = 0; 


$(window).scroll(function(){ 

     var lastID = $('.load-more').attr('lastid'); 
     if ($(window).scrollTop() == $(document).height() - $(window).height() && lastID != 0 && counter < 1){ 
      counter++; 
      $.ajax({ 
       type:'POST', 
       url:'getdata.php', 
       data:'id='+lastID, 
       beforeSend:function(html){ 
        $('.load-more').show(); 
       }, 
       success:function(html){ 
        // reset counter to 0 after you get your results 
        counter = 0; 
        $('.load-more').remove(); 
        $('#list').append(html); 
       } 
      }); 
     } 
    });

來源

2017-08-29 22:45:06 TimCodes

謝謝，但遞增計數器在哪裏？它總是0對不對？ – Dilak

eidited對不起，它在頂部的if塊 – TimCodes

這是很酷，如果你想一次允許幾個電話，那麼你可以有'--counter'而不是'counter = 0' – flcoder

$(window).one('scroll',function(){ ...} 
..

說明：處理程序各事件類型的每個單元執行最多一次。 http://api.jquery.com/one/ 函數只會在第一次滾動時執行，第二次也不會發生任何事情，也不會有任何後續時間。

來源

2017-08-29 22:14:13

當我這樣做腳本不再工作 – Dilak

是lastID null？ – TimCodes

沒有lastID不是nul。用我的腳本，當我向下滾動時腳本被執行兩次，所以我有兩次相同的結果。當我嘗試使用$（window）.one（'scroll'，function（）...該腳本不起作用 – Dilak

var timeout; 

$(window).scroll(function() { 
    clearTimeout(timeout); 
    timeout = setTimeout(function(){ 

    var lastID = $('.load-more').attr('lastid'); 
    if ($(window).scrollTop() == $(document).height() - $(window).height() && lastID != 0){ 
     $.ajax({ 
      type:'POST', 
      url:'getdata.php', 
      data:'id='+lastID, 
      beforeSend:function(html){ 
       $('.load-more').show(); 
      }, 
      success:function(html){ 
       $('.load-more').remove(); 
       $('#list').append(html); 
      } 
     }); 
    } 
}, 200); 
});

滾動的第二次執行將觸發取消功能延遲執行並啓動另一個不會被任何東西取消的執行。

來源

2017-08-29 22:34:17

對不起，你在哪裏使用var timeout？你在我的代碼中完全改變了什麼？ – Dilak

爲了防止第二次執行，在第一次執行後不久會觸發另一個滾動處理程序。我現在編輯它。 –

爲什麼在接受它後「不接受」答案？有問題？ –

您可以等到前一個加載完成後再加載一個新的。

var isLoading 

$(window).on('scroll', onScroll) 

function onScroll() { 

    if(isLoading) return 

    isLoading = true 

    $.ajax({ 
    success: function() { 

     isLoading = false 

     // Add content, etc... 

    } 
    }) 

}

來源

2017-08-29 22:45:00 flcoder

如果函數執行得很快，它仍然會執行兩次。 –

https://jsfiddle.net/vqcc1gk4/ –

@Killer Death Javascript是單線程的。你的小提琴代碼總是以isLoading = false退出。我的代碼不會退出，isLoading = false。這是一個巨大的差異。 – flcoder

再添加一個測試，所以你忽略滾動如果您的裝載機正顯示出

if (
    $(window).scrollTop() === $(document).height() - $(window).height() 

    && +lastID !== 0 

    // fancy way to say "Is this element in the DOM" w/ good performance 
    && $.contains(document.documentElement, $('.load-more')[0]) 
) { 

    // then load more content 

}

迷你咆哮：

我改變==到===和我明確coe lastID到一個數字，這也允許更改!=到!==。

當它沒有提供任何明顯的好處時，避免自動類型強制只是一種好習慣。這種語言功能本身並沒有壞處。但是，如果可以採取合理步驟避免它，則會使代碼更容易理解，並且更易於jit編譯器進行優化。當我在自己的代碼中找到類似==的東西時，它的外觀就是自我記錄，讓我知道我故意利用類型強制進行有目的的效果（其他保存1個小鍵盤按鍵）。

注：用於檢查元素存在選擇的方法從jsPerf走過來SLaks在他的評論提供給this answer。

來源

2017-08-29 23:44:10 skylize

好的，我看到謝謝 – Dilak

腳本向下滾動javascript問題

回答

相關問題