用戶滾動到頁面底部時的性能問題

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'
            });
        }
    });
});

但是后來我確實看到這不是一個高質量的解決方案，因為我將不得不粘貼並更改每個頁面的代碼，而且這將永遠不會很順利。

所以我確實檢查了這兩個帖子：
檢查用戶是否已滾動到底部

到達父容器底部的“ #sidebar”類時，如何添加“ bottom”類？

但是話又說回來，我無法使其順利運行，代碼可以正常工作，但是執行時間很多，

使用時：

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

控制台記錄“底部” 11次；

我試過使用去抖器，但是我只是不理解這個概念，或者只是沒有正確地使用它。

有人能做這樣的事嗎？

Answer 1

我看到3個可能的瓶頸：

1. 全局事件偵聽器（$（window）.scroll（））可能會附加多次（可能是如果您擁有SPA，其中導航不會重新加載頁面，並且每個新頁面都設置了一個處理程序）
2. 滾動事件處理程序發生在每個滾動事件上
3. ...和處理程序凍結頁面，直到頁面結束-這是被動事件偵聽器進行救援的地方。

至於＃2，您通過反跳解決了這個問題，但是最好查看您的代碼（關於確切的反跳邏輯）。 您可能以錯誤的方式進行操作，因此不僅調用了最后一個事件調度處理程序，而且每次都調用（有一些延遲）

至於＃3，jQuery 還不支持它，因此您需要使用低級的addEventListener。

Answer 2

防反跳功能限制了該功能可以觸發的速率。 閱讀有關反跳功能的更多信息還有另外一種方法可以改善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');
            }
        });
    });
});