Проблемы с производительностью, когда пользователь прокручивает страницу вниз

Question

У меня есть кнопка, которая зафиксирована в нижней правой части страницы;

.btn-this{
 width: 313px;
 height: 61px;
 background-color: #ebb762;
 position: fixed;
 bottom: 0;
 right: 0;
 z-index: 99;
}

И поэтому я хотел изменить положение кнопки с «фиксированной» на «относительной» после прокрутки наопределенная точка страницы;

Теперь сначала у меня была эта работа для меня:

JQuery(function ($) {
    var masinfo = $(".btn-this");
    $(window).scroll(function () {
        var scroll = $(window).scrollTop();

        if (scroll >= 457) {
            masinfo.css('position', 'relative');
        } else {
            masinfo.css({
                position: 'fixed',
                bottom: '0'
            });
        }
    });
});

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

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

Как я могу добавить класс "bottom" к "#sidebar", как только он достигнет дна родительского контейнера?

Но опять же, я не смог сделатьон работает гладко, код работает, но он выполняется много времени,

при использовании:

if ($(window).scrollTop() + $(window).height() > $(document).height() - 78) {
    console.log('bottom');
} 

консоль регистрирует «дно» 11 раз;

Iпопытался использовать debouncer, но я просто не понял концепцию или просто не сделал это правильно;

Есть кто-нибудьбыл в состоянии сделать что-то подобное?

Answer 1

Функция debounce ограничивает скорость, с которой функция может срабатывать.Подробнее о функция debounce Существует еще один способ улучшить производительность анимации / прокрутки, который представляет собой requestAnimationFrame

, поэтому ваша функция может быть записана как

JQuery(function ($) {
    var masinfo = $(".btn-this");
    $(window).scroll(function () {
        // If there's a timer, cancel it
        if (timeout) {
            window.cancelAnimationFrame(timeout);
        }
        // Setup the new requestAnimationFrame()
        timeout = window.requestAnimationFrame(function () {
            if ($(window).scrollTop() + $(window).height() > $(document).height() - 78) {
                console.log('bottom');
            }
        });
    });
});

Answer 2

Я вижу 3 возможных узких места:

1. глобальный прослушиватель событий ($ (window) .scroll ()) может быть подключен несколько раз (это может быть, если у вас есть SPA, где навигация не перезагружаетсястраница и каждая новая страница настраивают еще один обработчик)
2. происходит обработчик события прокрутки на каждой прокрутке событие
3. ... и обработчик останавливает страницу до ее завершения - вот где пассивные слушатели событий приходят на помощь.

Что касается # 2, то вы решили это с помощью debouncing, но лучше увидеть ваш код (о точной логике debouncing).Вы можете сделать это неправильно, поэтому вызывается не только обработчик отправки последнего события, но каждый раз (с некоторой задержкой)

Что касается # 3, jQuery пока не поддерживает , поэтому вам нужноиспользуйте взамен низкоуровневый addEventListener.