jQuery的getScript加入（URL）重複調用

我已經實現了無限滾動頁面上這段jQuery代碼：jQuery的getScript加入（URL）重複調用

paginate = function() { 
    if ($('.pagination').length) { 
    $(window).scroll(function() { 
     var url; 
     url = $('.pagination a.next_page').attr('href'); 
     if (url && $(window).scrollTop() > $(document).height() - $(window).height() - 50) { 
     $('.loader').removeClass('hidden'); 
     return $.getScript(url); 
     } 
    }); 
    return $(window).scroll(); 
    } 
}; 

$(document).on("page:load ready", paginate);

問題是，當這個函數被調用我developer_tools /網絡2個GET請求給看同樣的網址，出現這種情況隨機，可能是1個請求，可能是2

enter image description here

現在找不到了幾天的解決方案。迫切需要幫助。

來源

2014-10-03 rmagnum2002

那麼，在腳本完成加載之前，滾動事件理論上可以被激發很多次。解決的一個辦法是這樣的：

paginate = function() { 
    if ($('.pagination').length) { 
    $(window).scroll(scrollHandler); 
    return $(window).scroll(); 
    } 
}; 

scrollHandler = function() { 
    var url; 
    url = $('.pagination a.next_page').attr('href'); 
    if (url && $(window).scrollTop() > $(document).height() - $(window).height() - 50) { 
    $('.loader').removeClass('hidden'); 
    $(window).unbind('scroll'); 
    return $.getScript(url, function() { 
     $(window).bind(scrollHandler); 
    }); 
    } 
};

這背後的想法是要求腳本時要解除綁定的滾動事件，一旦加載腳本，重新綁定。

來源

2014-10-03 20:37:17

快到了，它發出一送，當我向下滾動到底部的請求，但不發送任何更多的請求當我繼續滾動。它只調用paginate函數一次，而我100％確定有更多的頁面要加載。基於你的答案更新的JavaScript看起來像這樣：https://gist.github.com/rmagnum2002/469c7267ccdc626b6ac4 – rmagnum2002 2014-10-03 20:46:13

找到一個工作的例子，非常感謝你的時間。 +1 – rmagnum2002 2014-10-03 21:16:48

完全沒問題。 :) – 2014-10-03 21:25:44

創建一個實例，每次發送1個獲取請求。

咖啡腳本：

onEndless = -> 
    url = undefined 
    $(window).off "scroll", onEndless 
    url = $(".pagination a.next_page").attr("href") 

    if url and $(window).scrollTop() > $(document).height() - $(window).height() - 150 
    $(".loader").removeClass "hidden" 
    $.getScript url, -> 
     $(window).on "scroll", onEndless 

    else 
    $(window).on "scroll", onEndless 

$(window).on "scroll", onEndless 
$(window).scroll()

JS：

var onEndless; 

onEndless = function() { 
    var url; 
    $(window).off('scroll', onEndless); 
    url = $('.pagination a.next_page').attr('href'); 
    // $('.pagination').hide(); 
    if (url && $(window).scrollTop() > $(document).height() - $(window).height() - 150) { 
    $('.loader').removeClass('hidden'); 
    return $.getScript(url, function() { 
     return $(window).on('scroll', onEndless); 
    }); 
    } else { 
    return $(window).on('scroll', onEndless); 
    } 
}; 

$(window).on('scroll', onEndless); 

$(window).scroll();

來源

2014-10-03 21:20:28 rmagnum2002

請記住，您現在在*每個*卷軸上取消綁定並重新綁定該事件，這在性能方面非常昂貴，並且可能會降低您的網站速度。 – 2014-10-03 21:24:59

那麼@MartinDenk，我仍然打開更好的想法。 :)所以，如果你對這段代碼有一些改進，不要猶豫，把它們寫在你的答案中，我會很高興地接受它。我是js的noob，這就是爲什麼綁定/取消綁定對我而言並不昂貴。 – rmagnum2002 2014-10-03 21:30:13

jQuery的getScript加入（URL）重複調用

回答

相關問題