节流防抖基本实现

学习链接：https://segmentfault.com/a/1190000018428170

拉动滚动条不停触发事件，此时会触发多次该函数

function showTop() {
    let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
    console.log('滚动位置' + scrollTop)
}
window.onscroll = showTop

需求:在触发n秒之内不再继续触发则执行该方法(防抖)   =》页面resize事件

function debounce(fn ,delay) {
        let time = null
        return function () {
            if(time) {
                clearInterval(time) // 2、之后在规定时间内每次触发事件都会重置time 并重新给time赋值，等到不再触发该事件时则执行setTimeOut
                time = setTimeout(fn,delay)
            } else {
                time = setTimeout(fn, delay) // 1、第一次触发事件会走到这里，给time赋值
            }
        }
    }

需求:用户在拉滚动条时每间隔n秒就执行一次(节流)  =》 搜索框input事件，例如要支持输入实时搜索可以使用节流方案

function Throttling(fn, delay) {
        let canDo = true // true代表可以执行
        return function () {
            if(!canDo) {
                return false
            }
            canDo = false // 在函数执行前保证该值为false，这样在函数为false期间就不会执行
            setTimeout(() => { // 每次执行完调用的函数之后，将canDo置为true
                fn()
                canDo = true
            }, delay)
        }
    }

调用：

    function showTop() {
        let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
        console.log('滚动位置' + scrollTop)
    }
    window.onscroll = Throttling(showTop, 1000)
    window.onscroll = debounce(showTop, 1000)