JavaScript-防抖、节流

1 防抖

1.1 定义

当事件连续触发时，一段时间内没有再触发，就执行一次；如果这段时间内，又触发了，则重新计时。

可以理解为游戏里面的技能的“前摇”。
复制代码

1.2 使用场景

1.Input框的连续输入
2.登录、发短信等按钮避免用户点击太快，需要防抖。
3.改变浏览器窗口大小时，由于resize次数太频繁，也需要用到防抖。
复制代码

防抖前：触发onmousemove事件

防抖后：触发onmousemove事件

1.3 代码实现

//定时器实现
function debounce(fn, delay) {
    let timer = null         //初始化一个timer
    return (...args) => {   
        //判断timer 如果有值，重新计时
        if(timer) clearTimeout(timer)
        timer = setTimeout(() => {
            fn.apply(this,args)
        },delay)
    }
}

//测试，改变浏览器窗口大小
window.onresize = debounce (function() {
    console.log('dobounce', arguments)
},500)
复制代码

2 节流

1.1 定义

让高频事件触发，每隔n秒只执行一次；

可以理解为游戏里面的技能的“冷却”。
复制代码

1.2 使用场景

1.scroll事件，每隔n秒计算一次位置。
2.mousedown事件，每隔n秒触发一次。
复制代码

节流：

1.3 代码实现

//时间戳方法： （当前时间 - 初始时间 > 延迟时间）, 执行节流函数
function throttle(fn, delay) {
    let pre = 0
    return (...args) => {
        let now = new Date().getTime()
        if(now - pre > delay) {
            fn.apply(this, args)
            pre = now
        }
    }
}
//测试，改变浏览器窗口大小
window.onresize = throttle (function() {
    console.log('throttle', arguments)
},500)
复制代码

//定时器方法
function throttle(fn,delay) {
    let timer = null
    return (...args) => {
        if(!timer){
            timer = setTimeout(() => {
                fn.apply(this, args)
            }, delay)
        }
    }
}
//测试，改变浏览器窗口大小
window.onresize = throttle (function() {
    console.log('throttle', arguments)
},500)
复制代码