防抖(debounce) 和 节流(throttle)

防抖(debounce)

高频事件触发, n 秒后函数只会执行一次，如果 n 秒内高频事件再次被触发，则重新计算时间

function debounce(fn，delay) {
    let timeout = null// 创建一个标记用来存放定时器的返回值
    return function() {
        // 每当用户输入的时候把前一个 setTimeout clear 掉
        if (timeout) clearTimeout(timeout);
        // 创建新的setTimeout, 这样就能保证输入字符后的 interval 间隔内如果还有字符输入的话，就不会执行 fn 函数
        timeout = setTimeout(() => {
            fn.apply(this, arguments)
        }, delay||500)
    }
}
function sayHi() { 
    console.log('防抖成功') 
}
document.getElementById('inp').addEventListener('input',debounce(sayHi)) // 防抖
复制代码

节流(throttle)

高频事件触发，n 秒内只会执行一次，节流会稀释函数的执行频率

function throttle(fn,delay) {
    let canRun = true // 通过闭包保存一个标记
    return function() {
        // 在函数开头判断标记是否为 true，不为 true 则 return
        if (!canRun) return  
        canRun = false // 立即设置为 false
        setTimeout(() => {
            // 将外部传入的函数的执行放在 setTimeout 中
            fn.apply(this, arguments)
            // 最后在 setTimeout 执行完毕后再把标记设置为 true(关键) 表示可以执行下一次循环了。当定时器没有执行的时候标记永远是 false，在开头被 return 掉
            canRun = true
        }, delay||500)
    }
}
function sayHi(e) {
    console.log(e.target.innerWidth,e.target.innerHeight)
}
window.addEventListener('resize',throttle(sayHi))
复制代码

应用场景

在前端开发中会遇到一些频繁的事件触发，比如：

• window 的 resize、scroll
• mousedown、mousemove
• keyup、keydown\
• input搜索框即时搜索，具体使用哪种方案要看业务需求；
• 页面适配resize事件，根据最终呈现情况进行dom渲染（一般是使用防抖，因为只需要判断最后一次的变化情况） ……

不同应用场景可以根据业务需求来调整