У меня есть скрипт в JavaScript, который загружает больше информации на странице прокрутки вниз. Проблема в том, что когда я прокручиваю вниз, скрипт выполняется дважды, и я получаю один и тот же результат дважды или даже больше.

Я хочу выполнить скрипт один раз каждый раз, когда прокручиваю вниз, а не выполнять его дважды или даже больше каждый раз.

Это скрипт:

$(window).scroll(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);
                }
            });
        }
    });
		
0
Dilak 30 Авг 2017 в 01:11

5 ответов

Лучший ответ

Попробуй это

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);
                }
            });
        }
    });
0
TimCodes 29 Авг 2017 в 22:45
$(window).one('scroll',function(){ ...}
..

Объяснение «one» из jquery docs: обработчик выполняется не более одного раза для каждого типа события. http://api.jquery.com/one/ Функция будет выполняться только при первой прокрутке, ничего не произойдет ни во второй, ни в последующий раз.

0
Killer Death 29 Авг 2017 в 22:14

Вы можете подождать, пока предыдущий загрузится, прежде чем загружать новый.

var isLoading

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

function onScroll() {

  if( isLoading ) return

  isLoading = true

  $.ajax({
    success: function() {

      isLoading = false

      // Add content, etc...

    }
  })

}
0
flcoder 29 Авг 2017 в 22:45

Добавьте еще один тест, чтобы игнорировать прокрутку, если ваш загрузчик показывает

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

}

< EM> Mini - Рант :

Я изменил == на === и явно привел lastID к числу, что также позволило изменить != на !==.

Это просто хорошая привычка избегать автоматического принуждения типов, когда оно не дает никакой очевидной выгоды. В этой языковой функции нет ничего плохого. Тем не менее, принятие разумных мер, чтобы избежать этого, когда это возможно, облегчит ваш код и облегчит его оптимизацию для jit-компилятора. Когда я нахожу что-то вроде == в своем собственном коде, его внешний вид самодокументируется, давая мне знать, что я намеренно использовал принудительное приведение типов для целенаправленного эффекта (другой, сохраняя одно небольшое нажатие клавиши).

Примечание . Выбранный метод проверки существования элемента взят из jsPerf, предоставленного SLaks в его комментарии к < a href = "https://stackoverflow.com/a/3086084/7776106"> этот ответ .

0
skylize 30 Авг 2017 в 00:43
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);
});

Второе выполнение прокрутки вызовет отмену отложенного выполнения функции и инициирует другое выполнение, которое ничем не будет отменено.

0
Killer Death 30 Авг 2017 в 05:47