Событие пожара после прокрутки полос прокрутки или колесика мыши с помощью javascript

Я хотел бы узнать, возможно ли запустить после событие при прокрутке страницы при использовании полосы прокрутки или колесика мыши (или с помощью салфетки на сенсорном устройстве).

В принципе, я бы хотел определить, когда пользователь остановил прокрутку, чтобы я мог загружать AJAX, а не загружать при прокрутке.

Кажется, что jQuery's .scroll() запускается каждый раз, когда пользователь прокручивается, и кажется неуклюжим иметь огонь событий все время. Есть ли такая вещь, как .onScrollAfter(), синонимом .onMouseUp()?

Я хотел бы знать, возможно ли это (или если функция уже существует) без использования фреймворка, хотя я бы рассмотрел один; особенно jQuery.

ОТВЕТЫ

Ответ 1

Это событие не существует. Вы можете эмулировать его с помощью тайм-аутов:

Пример (код концепции):

(function() {
    var timer;
    /* Basic "listener" */
    function scroll_finish(ev) {
        clearTimeout(timer);
        timer = setTimeout(scroll_finished, 200, ev);
        //200ms. Too small = triggered too fast. Too high = reliable, but slow
    }
    window.onscroll = scroll_finish; // Or addEventListener, it just a demo

    // Fire "events"
    var thingey = [];
    function scroll_finished(ev) {
        // Function logic
        for (var i=0; i<thingey.length; i++) {
            thingey[i](ev);
        }
    }
    // Add listener
    window.addScrollListener = function(fn) {
        if (typeof fn  === 'function') {
            thingey.push(fn);
        } else {
           throw TypeError('addScrollListener: First argument must be a function.');
        }
    }
    window.removeScrollListener = function(fn) {
        var index = thingey.indexOf(fn);
        if (index !== -1) thingey.splice(index, 1);
    }
})();

Ответ 2

Думал, я бы добавил это как ответ, хотя он старый. Событие, которое вы пытаетесь воссоздать, я считаю синонимом debounce. Это доступно в underscore.js

debounce_.debounce(функция, wait, [немедленная])Создает и возвращает новую отлаженную версию переданной функции, которая отложит ее выполнение до тех пор, пока не истечет миллисекунды ожидания с момента последнего вызова. Полезно для реализации поведения, которое должно произойти только после того, как вход остановился. Например: рендеринг предварительного комментария Markdown, пересчет макета после того, как окно перестало изменяться, и т.д.

Таким образом, он будет ждать после вашего последнего выполнения конкретного события. если вы не хотите задержки, вы можете просто указать 0. Дэвид Уолш имеет довольно приятную реализацию, которую вы можете включить в любой проект.

function debounce(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this, args = arguments;
        var later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
};

Что вы можете добавить, выполнив

var myEfficientFn = debounce(function() {
    // All the taxing stuff you do
}, 250);

window.addEventListener('scroll', myEfficientFn);

Ответ 3

Описание

Вы можете использовать приятный плагин jQuery Специальные события прокрутки для jQuery Джеймса Падолей.

Отлично работает.

Посмотрите страницу и демонстрация jsFiddle (просто прокрутите;))

Дополнительная информация