防抖和节流机制

在前端开发的过程中，我们经常会需要绑定一些持续触发的事件，如 resize、scroll、mousemove 等，或者用户会高频次触发某个事件，但我们并不希望在事件持续触发的过程中那么频繁地去执行函数。所以此时就会用到防抖和节流

防抖

防抖的概念是当你高频率 (触发事件的间隔小于你设置的wait) 触发某事件的的时候，只有当你停止触发事件（或者说触发事件的间隔大于你设置的wait），才会执行事件绑定的函数。

防抖分为两种，一种是首次触发不执行，另外一种是首次触发执行，具体使用根据你的业务场景来

代码实现 （首次触发不执行）

function debounce (fn, wait) { 
    let timer = 0
    return function(...args){  // args ['coder']
        // 当触发事件事件间隔小于wait，则清除定时器
        if(timer) {
            clearInterval(timer) 
       }
        // 当事件触发停止或者触发时间间隔大于wait,则函数执行
        timer = setTimeout(function() {
            fn.apply(null, args)
        }, wait)
    }
}复制代码

代码实现 （首次触发执行）

function _debounce (fn, wait) { 
    let timer = 0
    return function(...args){  // args ['coder']
        // 当触发事件事件间隔小于wait，则清除定时器
        if(timer) {
            clearInterval(timer) 
        }
        // 首次触发即执行函数
        if(!timer){           
            fn.apply(null, args)             
        }
        // 当事件触发停止或者触发时间间隔大于wait,则函数执行
        timer = setTimeout(function() {
            fn.apply(null, args)
        }, wait)
    }
}复制代码

功能使用

function sayHi(name) {
    `${name}防抖成功`
}
// 此时debounce 函数已经执行了，debounceSayHi实际上是debounce返回的内层函数，这里应用了闭包
const debounceSayHi = debounce(sayHi, 2000)
input.addEventListener('input', function(){
    debounceSayHi('coder')
}, false)复制代码

当然我可以对代码稍作改造，将两种结合在一起

// immediately传true时代表首次触发，传false时代表首次不触发
function debounce(fn, wait, immediately){    let timer = 0
    return function(...args){  // args ['coder']
        // 当触发事件事件间隔小于wait，则清除定时器
        if(timer) {
            clearInterval(timer) 
        }
        // 首次触发即执行函数
        if(immediately) {
            if(!timer){           
                fn.apply(null, args)             
            }
        }        // 当事件触发停止或者触发时间间隔大于wait,则函数执行
        timer = setTimeout(function() {
            fn.apply(null, args)
        }, wait)
    }}复制代码

节流

节流的概念是当你高频率触发事件的时候，控制函数在wait时间内只执行一次，减少函数的执行次数，达到节流的效果。

节流分为两种，一种是首次触发不执行，另外一种是首次触发执行，具体使用根据你的业务场景来

代码实现（首次不触发,定时器方法）

function throttle(fn, wait){
    let timerId
    return function(...args){
        if(!timerId) {
            timerId = setTimeout(function(){               
                fn.apply(null, args)
                timerId = null
            }, wait)
        }    }
}复制代码

使用

function sayHello() {
    console.log('say Hello')
}
btn1.addEventListener('click', throttle(sayHello, 2000), false)复制代码

代码实现（首次触发,时间戳方法）

function _throttle(fn, wait){
    let time = 0
    return function(...args){
        // 首次必执行，判断当前执行时间 - 上次执行时间，是否大于设置时间间隔
        let now = +new Date()
        if(now - time > wait) {
             fn.apply(null, args)    
             time = now      
         }
     }
}复制代码

使用

function sayHello() {
    console.log('say Hello')
}
btn1.addEventListener('click', _throttle(sayHello, 2000), false)复制代码

当然如果你项目中本身就安装了lodash,你可以直接使用lodash里面的debounce和throttle，用法和上述使用方法一样。