防抖

如果短時間內大量觸發同一事件，只會執行一次函式。

事件延遲執行，再觸發重新整理時間

/*****************************簡化後的分割線 ******************************/
function debounce(fn,delay){
    let timer = null //藉助閉包
    return function() {
        if(timer){
            clearTimeout(timer) 
        }
        timer = setTimeout(fn,delay) // 簡化寫法
    }
}
 
// 然後是舊程式碼
function showTop  () {
    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
　　console.log('滾動條位置：' + scrollTop);
}
window.onscroll = debounce(showTop,1000) // 為了方便觀察效果我們取個大點的間斷值，實際使用根據需要來配置

節流

如果短時間內大量觸發同一事件，那麼在函式執行一次之後，該函式在指定的時間期限內不再工作，直至過了這段時間才重新生效。

function throttle(fn,delay){
    let valid 
 
= true
    return function() {
       if(!valid){
           //休息時間 暫不接客
           return false 
       }
       // 工作時間，執行函式並且在間隔期內把狀態位設為無效
        valid = false
        setTimeout(() => {
            fn()
            valid = true;
        }, delay)
    }
}
/* 請注意，節流函式並不止上面這種實現方案,
   例如可以完全不借助setTimeout，可以把狀態位換成時間戳，然後利用時間戳差值是否大於指定間隔時間來做判定。
   也可以直接將setTimeout的返回的標記當做判斷條件-判斷當前定時器是否存在，如果存在表示還在冷卻，並且在執行fn之後消除定時器表示啟用，原理都一樣
    
 
*/

// 以下照舊
function showTop  () {
    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
　　console.log('滾動條位置：' + scrollTop);
}
window.onscroll = throttle(showTop,1000)