Question

当滚动距离底部800px时，我正在调用一个函数。它多次调用该函数，但我只想调用一次该函数，然后加载一些数据，当我进入800px表格底部时再次调用，那么它应该只调用一次该函数。该函数名称为round。

round

Answer 1

滚动事件可能是连续多次触发的。因此，如果在实际触发if的代码之前，window.scrollTop（）从底部开始是800，然后从底部开始是799，从底部是798，则将调用您的函数。

尝试重新设置window.scrollTop（value），使其永远不会从底部超过800。这样，您的函数仅被调用一次。

Answer 2

您使用的是“ if”条件，只要 $（window）.scrollTop（）+ $（window）.height（）> $（document）.height（）- 800 这意味着每当

的值

    $(window).scrollTop() + $(window).height()

高于

的值

    $(document).height() - 800

该函数将始终被调用。尝试使用'==='而不是'>'，以便针对特定值仅触发一次循环。

您也可以尝试使用控件。可以说；介绍

    var hasRun = 0; //increment this value once the condition
    // $(window).scrollTop() + $(window).height() > $(document).height() - 800 
    //is true.

每当减小var hasRun的值

    $(window).scrollTop() + $(window).height() < $(document).height() - 800

是真的。请尝试这个。

     $(window).scroll(function(event) {
var hasRun = 0;
if($(window).scrollTop() + $(window).height() > $(document).height() - 
800 ) {
hasRun = hasRun + 1;
}
 if($(window).scrollTop() + $(window).height() < $(document).height() - 
800 ) {
hasRun = 0;
}
if(hasRun <= 0){
// ajax call get data from server and append to the div
var id = $('#load_more_button').data('id');
$('#load_more_button').html('<b>Loading...</b>');
if (id >= 1) {
load_data(id, _token);  
}       
}
});

Answer 3

我希望这就是你想要的。

function load_data(id = "", _token) {
    $.ajax({
        url: "load_data",
        method: "POST",
        data: {
            id: id,
            _token: _token
        },
        success: function (data) {
            $('#load_more').remove();
            $('.post_data').append(data);
            scrollFlag = false;
        }
    });
}
console.log(id);
var flag = false;
var scrollFlag = false;

$(window).scroll(function (event) {
    var scroll = $(window).scrollTop();
    var height = $(document).height() - 400;
    if (!scrollFlag) {
        scrollFlag = true;
        if ((scroll > height || !flag)) {
            // ajax call get data from server and append to the div
            var id = $('#load_more_button').data('id');
            $('#load_more_button').html('<b>Loading...</b>');
            if (id >= 1) {
                load_data(id, _token);
            }
            flag = true;
        }
    }
});

https://jsfiddle.net/qu1eon2d/

滚动事件被多次触发

3 个答案: