javascript - 无限滚动和排序问题

Question

我正在使用以下 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 example

Answer 1

首先，不要创建所有这些随机的 jquery 对象。创建一次，然后重复使用。最好的方法是将其放入范围内，这样其他代码就不会受到局部变量的干扰。

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

然后是你的问题。您需要阻止更新的触发状态，直到另一个更新完成。您有 busy 变量，我将其重命名为 loading。

问题是加载在排序结束时被设置为真。之后，滚动事件由 javascript 线程通过调整内容大小等方式触发。此事件表明加载已完成，因此接下来会重新触发加载。

您需要的是定义滚动可能由排序更新触发的第二个变量。为此，我使用了 triggeredByResort。这是一个在 150 毫秒后自动重置为 false 的变量，但如果在该时间范围内发生“滚动”事件，则第一次出现的滚动将终止。第二次会发生。如果什么都没发生，变量将在 150 毫秒后自动重置为 false。

+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)