如何阻止使用.scroll时多次触发ajax调用？

Posted 2021-03-19

我写了一篇 jQuery 允许我在飞行中修改一些html。

$(document).ready(function() {
$(window).scroll(function () {
  if ($(window).scrollTop() > $('#target').height() / 2) {
    request = $.ajax({
              // ajax call
            });

       request.done(function(html){
            $(html).appendTo('#target');
       });
  }
}
});

所以基本上当用户在元素上滚动到一半的时候，用 id='target' 它通过ajax调用触发，得到一些新的html并附加到目标上。

此外，当在边界附近上下滚动时（高度的一半）。target)会导致调用的多次触发。

有没有一种方法可以只允许一个ajax调用，当它通过一半的时候，它就不能再进行另一个调用，直到它通过了新的一半点的 #target 与附加的html？

答案

你可以为其维护一个状态。

$(document).ready(function() {

  let isRequestInProcess = false; // state of request

  $(window).scroll(function () {

    if (
      ($(window).scrollTop() > $('#target').height() / 2) &&
      !isRequestInProcess
    ) {

      isRequestInProcess = true; // change state as in process
      request = $.ajax({
                  // ajax call
                });
      request.done(function(html){
           isRequestInProcess = false; // change state again to false
           $(html).appendTo('#target');
      });

    }
  }
});