简单版的防抖和节流

  防抖和节流都是为了解决响应速度更不上触发频率，而出现的卡死，不流畅问题。

  防抖：事件在触发n秒后会执行，如果n秒内事件再次被触发则重新计时

//fn要进行防抖的函数
function debounce(fn,delay){
    let timeout = null,                    //设置定时器标识存放定时器

    return function(){                     //闭包保存定时器
        if(timeout)clearTimeout(timeout)       //规定时间内如果事件再次被触发，清除上一个定时器

        timeout = setTimeout(function(){         //注意：得用普通函数，箭头函数不行
            fn.apply(this,arguments)        
            timeout = null
        },delay)
    }
}

//函数调用
window.addEventListener('scroll',debounce(function(){
    console.log('1111')
},500))

  实现：n秒内如果事件被再次调用，清除上一次的定时器，重新打开新定时器，因为要执行的函数被放在定时器中，清除了定时器函数就不会再执行了。

  节流：事件在n秒内只会被触发一次，如果多次触发，也只有第一次触发有效

function throttle(fn,delay){
    let canRun = true                //设置变量控制节流

    return function(){
        if(!canRun) return           //若之前有定时器就直接return,只有第一次触发时可以执行到下面程序，后面的都会被return掉

        canRun = false

        setTimeout(function(){

            fn.apply(this,arguments)
            canRun = true            //执行完函数后又把canRun置为ture，又能开始新的节流操作了

        },delay)
    }
}
            

实现：利用变量canRun控制程序能否进行到定时器那一步，如果之前有函数执行到，就立即把后面的函数return掉，不给它们开启定时器执行函数的机会