阅读 244

JavaScript-防抖、节流

1 防抖

1.1 定义

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

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

1.2 使用场景

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

防抖前:触发onmousemove事件

2.webp 防抖后:触发onmousemove事件

1.webp

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秒触发一次。
复制代码

节流:

3.webp

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)
复制代码
文章分类
前端
文章标签