JavaScript节流和防抖

何为防抖？

以点击事件为例，如果没有设置防抖，那么你点击了几次，事件就执行几次。这会造成不少问题，例如如果你是一个表单提交的话，因为调用接口提交数据时，会有延时，不会立刻就提交完成。在延时的这段时间里，如果你一直点击提交，就会造成提交了多次的情况。因此这时我们就需要用到防抖来防止这种情况。

代码示例

定时器方案

let test = document.getElementById("test")
test.addEventListener('click',debounce(() => {
    console.log('test')
},500))

function debounce(func, wait) {
    let timer = null
    return function() {
        if(timer) {
            clearTimeout(timer)
        }
        timer = setTimeout(func, wait)
    }
}

 

 

何为节流？

还是点击事件为例，节流就是让事件以一个平均速率执行，如果设置的是一秒执行一次，那么无论你一秒点击了多少次，事件都是只执行一次。

（1）时间戳

function throttle(fn,wait){
    var pre = Date.now()
    return function(){
        var context = thisvar args = arguments
        var now = Date.now()
        if( now - pre >= wait){
            fn.apply(context,args)
            pre = Date.now()
        }
    }
}

function handle(){
    console.log('test')
}
// 定时器设置的是100毫秒执行一次，因为设置了节流，所以变成了1秒执行一次
setInterval(throttle(handle, 1000),100)

　　

（2）定时器

function throttle(fn,wait){
    var timer = null
    return function(){
        var context = thisvar args = arguments
        if(!timer){
            timer = setTimeout(function(){
                fn.apply(context,args)
                timer = null;
            },wait)
        }
    }
}
    
function handle(){
    console.log('test')
}
// 定时器设置的是100毫秒执行一次，因为设置了节流，所以变成了1秒执行一次
setInterval(throttle(handle, 1000),100)