防抖和节流

为什么要使用防抖和节流？

当浏览器中的resize、scroll、mousemove，多次click等事件被触发时，每次触发都调用一次函数。不断地调用函数会降低性能。

为了优化性能，降低调用的频率，限制函数的执行次数，就可以采用防抖或节流。

防抖

防抖是在指定的时间内，只执行最后一次，如果在指定时间内再次被触发，则将会重新开始计时。

eg：王者回城需要等待n秒，当回城的时候被打断了，再次回城则需要再次等待n秒

// 非立即执行
function debounce(fn,delay){
     var timer = null
    // 在页面调用debounce函数的时候，debounce(fn)是执行一个函数
    // 所以需要返回一个函数
    return function(){
        // 通过setTimeout的方式限制fn的执行
        if(timer){
            // 如果计时器存在，就清除计时器
            clearTimeout(timer)
        }
        timer = setTimeout(() => {
            // fn()  //this是指向window的
            fn.apply(this,arguments)  //将debounce最终返回的函数this指向绑定给自身
        }, delay);
    }
}

//立即执行
function debounce(fn,delay){
    var timer = null
    return function(){
        if(timer){
            clearTimeout(timer)
        }
        if(!timer){
            fn.apply(this,arguments)
        }
        timer = setTimeout(()=>{
            timer = null
        },delay)
    }
}

 应用场景有：搜索框输入，等用户输完后再发送请求；文本编辑器的实时保存

节流

节流是在指定的时间内，只执行一次操作

例如，王者点击技能的时候，点击完要等冷却时间过了才能被再次执行。

// 时间戳的方式
// 是在指定的时间内执行第一次
function throttle(fn,delay){
    let old = 0
    return function(){
        let new = new Date().getTime()
        if(new - old > delay){
            fn.apply(this,arguments)
            old = new
        }
    }
}

// 定时器的方式
// 是在指定的时间内执行最后一次
function throttle(fn,delay){
    let timer = null
    return function(){
        if(!timer){
            timer = setTimeout(()=>{
                fn.apply(this,arguments)
                timer = null
            },delay)
        }
    }
}

应用场景有：滚动加载，快速点击，鼠标滑动，resize事件等高频事件。