Как вызвать ajax-запрос на остановке прокрутки?

Question

При прокрутке окна я делаю ajax-запрос следующим образом

$(window).scroll(function(){
 //doing ajax request
});

, но он создает несколько ajax-запросов для события прокрутки.Есть ли какое-либо событие, например, onscrollstop или что-то, что срабатывает только после окончания прокрутки окна.Или есть другой способ справиться с тем же сценарием.Пожалуйста, предложите.

Answer 1

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

var timeout = null;

$(window).scroll(function() {
    clearTimeout(timeout);
    timeout = setTimeout(function() {
        // do your ajax request
    }, 100);
});

Answer 2

Вам следует подождать короткий период и инициировать запрос, только если больше нет событий прокрутки.

var timer, // store a timeout reference
    pendingAjax, // store the last AJAX request
    scrollHandler = function() {
        pendingAjax.abort(); // cancel the last request if it's still running
        pendingAjax = $.ajax({...}); // start a new AJAX request
    };

$(window).scroll(function() { // whenever the window is scrolled
    clearTimeout(timer); // cancel the existing timer
    timer = setTimeout(scrollHandler, 300); // and start a new one
});

Answer 3

Этот вопрос предлагает одно решение.

Другой способ сделать это, а не таймер, - просто установить флаг, который указывает, что запрос ajax уже выполняется, и ничего не делать, пока флаг не будет очищен исходным запросом. Вы также можете установить таймер после сброса флага, если хотите, чтобы запросы ajax происходили не чаще, чем на произвольной частоте (например, не чаще, чем каждые 5 секунд).