★ 防抖、节流

• what，how， why ？

防抖

• 概念：控制次数 - 触发高频事件后 n 秒内函数只执行一次，如果 n 秒内高频事件再次触发则重新计算时间
• 使用场景：
  • search 搜索功能，在不间断输入值的时候用防抖来节约请求资源
  • window 触发 resize 的时候会不间断的执行，用防抖来让其只触发一次

function debounce(fun, wait = 500) {
    let task = null

    return function() {
        if(task) clearTimeout(task)

        task = setTimeout(() => {
            fun.apply(this, [...arguments])
        }, wait)
    }
}

节流

• 概念：控制频率 - 高频事件触发 n 秒内只执行一次
• 使用场景：
  • 懒加载时要监听计算滚动条的位置

function throttle(fun, wait = 1000) {
    let lastTime = 0

    return function() {
        let nowTime = + new Date()

        if(nowTime - lastTime > wait) {
            lastTime = nowTime
            fun.apply(this,  [...arguments])
        }
    }
}

function throttle(fun, wait = 1000) {
    let canRun = true

    return function() {
        if(!canRun) return 

        canRun = false
        setTimeout(() => {
            fun.apply(this,  [...arguments])
            canRun = true
        }, wait)
    }
}