воскресенье, 1 июля 2012 г.

Как работать и не работать с window scroll event

Если хотим затормозить работу страницы делаем так:

// antipattern
$(window).scroll(function () {
 $('.foo').something();
});
Лучше не выполнять тяжеловестные операции на столь часто срабатывающее событие. Нужно минимизировать выполнение этого кода:

// preferred
var outerPane = $details.find(".details-pane-outer"),
    didScroll = false;
$(window).scroll(function () {
    didScroll = true;
});

setInterval(function () {
    if (didScroll) {
        didScroll = false;
        // Check your page position and then
        // Load in more results
        // outerPane.html();
    }
}, 250);


// preferred v2, timeout instead of interval - no unnecessary ticks
var scrollTimeout;  // global for any pending scrollTimeout
var outerPane = $details.find(".details-pane-outer");

$(window).scroll(function () {
    if (scrollTimeout) {
        // clear the timeout, if one is pending
        clearTimeout(scrollTimeout);
        scrollTimeout = null;
    }
    scrollTimeout = setTimeout(scrollHandler, 250);
});

scrollHandler = function () {
    // Check your page position and then
    // Load in more results
    // outerPane.html();
};
Первый вариант хорош тем, что в обработчике события прокрутки мы вообще делаем одну молниеносную:) операцию. Недостаток в том, что у нас срабатывает постоянный периодичный обработчик. Второй хорош тем, что запустит тяжелый обработчик только тогда, когда прокрутка остановиться, и нет никакой вечной проверки. Недостаток больше операций в обработке скрола.

Комментариев нет:

Отправить комментарий