JS 函数节流和防抖

👁 2021-02-17

学习 js的函数节流与防抖

1 函数节流

函数节流：一个函数执行一次后，只有在大于设定时间执行周期后才会执行
有一个频繁触发的函数，处于对性能的考虑，在规定时间内，只执行一次生效，其余不生效。
应用场景：用户滚动窗口时，在规定时间内事件触发。

function throttle(fn,delay){
    //传入要被节流的函数参数，延迟时间
    //声明上一次的执行时间
    var lastTime = 0;
    //使用闭包函数解决lastTime不记录问题
    return function(){
        //记录触发时间
        var nowTime = Date.now()
        var arg = arguments
        if(nowTime - lastTime > delay){
            //如果时间间隔大于延迟时间，则触发函数
            //修改this指向
            fn.call(this, ...arg)
            //同步lastTime
            lastTime = nowTime
        }
    }
}                

//为document绑定事件
document.onclick =  throttle(function(e){console.log("事件触发啦", Date.now(), e)},2000)

2 函数防抖

函数防抖：一个频繁触发的函数，在规定时间内，只让最后一个生效，其余不生效。
应用场景：用户在输入框中输入完成后，进行事件触发。

function debounce(fn,delay){
    //记录上一次的延迟器
    var timer = null
    return function(){
        //清除上一次延迟器
        clearTimeout(timer)
        var arg = arguments
        timer = setTimeout(
        function(){
            //修改this指向问题
            fn.apply(this, arg)
        },delay)
    }
}

document.onclick = debounce(function(e){console.log("点击触发函数啦", Date.now(), e)},3000)