js函数防抖和函数节流

函数防抖和函数节流都是降低回调执行频率，节省计算资源。是前端优化性能的一种手段。

一、概念

1.函数防抖：

在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。
生活中的实例： 如果有人进电梯（触发事件），那电梯将在10秒钟后出发（执行事件监听器），这时如果又有人进电梯了（在10秒内再次触发该事件），我们又得等10秒再出发（重新计时）。

2.函数节流：

规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。
生活中的实例： 我们知道目前的一种说法是当 1 秒内连续播放 24 张以上的图片时，在人眼的视觉中就会形成一个连贯的动画，所以在电影的播放（以前是，现在不知道）中基本是以每秒 24 张的速度播放的，为什么不 100 张或更多是因为 24 张就可以满足人类视觉需求的时候，100 张就会显得很浪费资源。

二、应用场景

1.函数防抖应用场景：

• 实时搜索。只需用户最后一次输入完，再发送请求
• 手机号、邮箱验证输入检测
• 窗口大小Resize。只需窗口调整完成后，计算窗口大小。防止重复渲染。

2.函数函数节流场景：

• DOM元素拖拽
• Canvas画笔功能
• 图片懒加载

三、具体实现

首先定义个回调函数

var fn=function(){
    console.log('打印')
}

1.函数防抖

function debounce(fn,delay){
    var timer=null
    return function(){
        clearTimeout(timer)
        timer=setTimeout(function(){
            fn()
        },delay)
    }
}

• 实时搜索调用示例

<input type="text" id='input' />
<script>
    var onInput=document.getElementById(input')
    onInput.oninput=debounce(fn,500)
</script>

2.函数节流，有两种方法

• 时间戳

function throttle1(fn,delay){
    var lastTime=new Date().getTime()
    return function(){
        var curTime=new Date().getTime()
        if(curTime-lastTime<delay)return
        lastTime=curTime
        fn()
    }
}

• 定时器

function throttle2(fn,delay){
    var timer=null
    return function(){
        if(timer)return
        timer=setTimeout(function(){
            fn()
            timer=null
        },delay)
        
    }
}

四、总结

• 区别：函数防抖和函数节流是在时间轴上控制函数的执行次数。防抖可以类比为电梯不断上乘客,节流可以看做幻灯片限制频率播放电影
• Vue中修饰符prevent 是拦截默认事件，passive是不拦截默认事件。可以使用passive这个修饰符配合滚动监听。因为滚动监听过程中，移动每个像素都会产生一次事件，每次都使用内核线程查询prevent会使滑动卡顿。我们通过passive将内核线程查询跳过，可以大大提升滑动的流畅度。