防抖与节流

防抖与节流

一、前言

在前端面试中，面试官会经常问到什么是防抖节流，它们之间有什么区别，请手写一下防抖节流等问题。 为了特地讲解一下防抖和节流，在加深二者的理解，首先提出几个问题，带着问题看文章。

1. 什么是防抖与节流？
2. 防抖与节流之间的不同点是什么？
3. 他们各自的使用场景是什么？
4. 如何写防抖与节流的代码？

二、防抖

2.1 定义

防抖就是设置一个时间，在规定的时间内触发事件都会使得时间重新计时，以输入框输入内容发送请求为例，当一直输入内容，间隔不超过规定时间，就不会发送请求，只有当输入内容的间隔超过规定时间，才会执行最后一次函数。

2.2 使用场景

1. 按钮重复点击
2. 搜索框的搜索

2.3防抖代码

function debounce(exefn,delay){
    //先初始化一个定时器
    let timer = null
    return _debounce(){
        //如果定时器不为空，就清除定时器,重新计时
        if(timer) clearTimeout(timer)
        timer = setTimeout(()=>{
            exefn()
            timer = null
        },delay)
    }
}

三、节流

3.1 定义

节流就是规定一个时间间隔，在这段时间间隔内连续触发事件，但是只会执行一次。

3.2 使用场景

1. 滚动事件
2. 鼠标移动事件

3.3 节流代码

function throttle(exefn,delay){
    //用于记录上一次函数执行的时间戳
    let lastExectionTime = 0
    return _throttle(){
        //记录一下当前时间
        let nowTime = Date.now()
        //然后如果当前时间-上一次执行时间>= 时间间隔,就执行一次函数
        if(nowTime - lastExectionTime >= delay) {
            exefn()
            //然后把上一次函数执行的时间戳变为当前时间的时间戳
            lastExectionTime = nowTime
        }
    }
}

四、防抖与节流的区别

4.1 相同点

1. 都是用来实现前端性能优化的手段
2. 都是用来控制事件触发的频率

4.2 不同点

1. 防抖是将多次执行函数变成最后一次执行，类比于搜索框中输字，只有超过规定时间，才会发送请求。而节流是在规定时间间隔内都会执行一次函数，和防抖不一样，防抖是输入内容只要不超过规定时间，就不发送请求，但是节流就算不超过规定时间的一直输入内容，当时间间隔一到，就会执行一次。

五、总结

本文到这里就结束了，希望对你理解防抖节流有帮助，如有错误，疏漏的地方恳请指出，感谢你的阅读！