Бесконечная прокрутка и сортировка - PullRequest
Новая
       12

Бесконечная прокрутка и сортировка

0 голосов
/ 05 июля 2018

Я использую следующий JavaScript для бесконечной прокрутки и сортировки: 

$(window).scroll(function () {
  if ($(window).scrollTop() + $(window).height() == $(document).height()) {
    if (!busy) {
      busy = true;
      $('#spinner').show();
      // AJAX call and append list
      $('#spinner').hide();
      busy = false;
    }
  }
}); 
$('#sort').on('change', function () {
  // AJAX call and replace list
});

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

Как предотвратить срабатывание функции прокрутки при сортировке в моем списке?

Обновление

Простой пример. Сначала прокрутите вниз, затем выполните сортировку, которая приведет к двум оповещениям.

Пример JSFiddle

1 Ответ

0 голосов
/ 05 июля 2018

Прежде всего, не создавайте все эти случайные объекты jquery. Создайте один раз, затем снова используйте. Лучший способ - поместить его в область видимости, чтобы другой код не мешал локальным переменным. 

+function($window, $document, $) {
   ... code here
}(jQuery(window), jQuery(document), jQuery)

Тогда к вашему вопросу. Вам нужно заблокировать ваше состояние запуска для обновления, пока другое не будет сделано. У вас есть переменная busy, я переименовал ее в loading.

Проблема в том, что загрузка устанавливается в значение true в конце сортировки. После этого событие прокрутки запускается потоком javascript через изменение размера содержимого. Это событие вызывает загрузку, которая должна быть выполнена, таким образом перезапуская нагрузку следующим образом.

Вам нужна вторая переменная, которая определяет, что прокрутка, вероятно, была вызвана обновлением сортировки. Я использовал triggeredByResort для этого. Это переменная, которая автоматически сбрасывается в false через 150 миллисекунд, но если в течение этого периода происходит событие «прокрутка», первое вхождение прокрутки прекращается. Произойдет второй случай. Если ничего не произойдет, переменная автоматически сбросится в false через 150 миллисекунд. 

+function(window, document, $) {
   var $spinner = $('#spinner');
   var $sort = $('#sort');
   var $window = $(window);
   var $document = $(document);
   var triggeredByResort = false;
   var loading = false;
   var doneLoading = function() {
       $spinner.hide();
       loading = false;
   }
   var startLoading = function() {
      loading = true;
      $spinner.show();
   }
   $sort.on('change', function() { 
        var direction = $sort.val();
        startLoading();
                $.ajax({
                   type: "POST",
                   url: 'sortstufftarget.html',
                   data: {
                      direction: direction,
                      // stuff data
                   },
                   success: function(data) {
                      triggeredByResort = true;
                      window.setTimeout(function() {
                          triggeredByResort = false;
                      }, 150);
                      // replace stuff code here

                      doneLoading();
                   },
                   error: function(data) {
                      window.alert('an error occured');
                      doneLoading();
                   }
               });
   });

   $window.scroll(function () {
       if (!loading && $window.scrollTop() + $window.height() == $document.height()) {
                if(triggeredByResort) {
                   triggeredByResort = false;
                   return;
                }
                startLoading();
                $.ajax({
                   type: "POST",
                   url: 'loadnewstufftarget.html',
                   data: {
                      // load new stuff data
                   },
                   success: function(data) {
                      // append stuff code here
                      doneLoading();
                   },
                   error: function(data) {
                      window.alert('an error occured');
                      doneLoading();
                   }
               });
            }
        }); 
}(window, document, jQuery)
...