Нажатие кнопки прокрутки на прокрутке вызывает несколько кликов

Question

Я пытаюсь вызвать нажатие кнопки прокрутки, когда скроллер попадает в div. ниже приведен код, который я пробовал, но когда скроллер попадает в div, он вызывает несколько кликов и загружает следующий набор данных. Может кто-нибудь предложить мне, как вызвать клик только один раз.

Спасибо за помощь заранее:)

$(window).scroll(function() {
    var divTop = $('.hit-scroll').offset().top,
    divHeight = $('.hit-scroll').outerHeight(),
    wHeight = $(window).height(),
    windowScrTp = $(this).scrollTop();
    if (windowScrTp > (divTop+divHeight-wHeight)){
        $('body').find('.show-more button').trigger('click');
    }
}); 

Примечание: при нажатии кнопки выполняется вызов ajax, который загружает следующий набор данных,

Answer 1

Проблема в том, что каждый раз, когда вы прокручиваете вниз на 1 пиксель, вы запускаете $(window).scroll

. Итак, представьте, что windowScrTp > (divTop+divHeight-wHeight) равно 200 > (168), что означает, что ваша функция щелчка будет срабатывать дважды.

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

var load = true;
$(window).scroll(function() {
    var divTop = $('.hit-scroll').offset().top,
    divHeight = $('.hit-scroll').outerHeight(),
    wHeight = $(window).height(),
    windowScrTp = $(this).scrollTop();
    if (windowScrTp > (divTop+divHeight-wHeight)){
        if(load){
          load = false;
          $('body').find('.show-more button').trigger('click');
        }
    }
});

Внутри вашего успешного вызова ajax я бы добавил load = true;

Я создал демо, которое показывает идею ниже.

Демо

var load = true;
$(window).scroll(function() {
  var windowScrTp = $(this).scrollTop();
  if (windowScrTp > (200)) {
    if (load) {
      console.log("load start")
      load = false;
      $('body').find('.show-more button').trigger('click');
    }
  }
});

$('.show-more button').click(function() {
  setTimeout(
    function() {
      console.log("load stop")
      load = true;
    }, 2000);
});

body {
  height: 2000px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="show-more"><button>more</button></div>