防抖与节流是什么？如何实现？

目录

♡ ‧₊˚  定义  ‧₊˚ ♡

 ♡ ‧₊˚  实现  ‧₊˚ ♡

防抖

 节流

 ♡ ‧₊˚  应用  ‧₊˚ ♡

---

♡ ‧₊˚  定义  ‧₊˚ ♡

防抖（debounce）：当我们持续触发一个事件时，事件处理程序不会执行，只有当我们在设置的时间间隔里没有触发事件时，事件处理程序才会执行，若在这个时间间隔里被重复触发则重新开始计算。

节流（throttle）：无论事件触发得多么频繁，在规定的时间间隔内只执行一次事件处理程序。

目的：都是为了降低回调执行频率。节省计算资源

 ♡ ‧₊˚  实现  ‧₊˚ ♡

防抖

代码实现如下：

    <input type="text" id="shuru">
    <button onclick="btnClick()">此处防抖button>
    <script>
        // 防抖
        // 获取事件
        var shuru = document.getElementById('shuru')
        // 创建一个定时器
        var timeID = null
        // 绑定事件
        shuru.oninput = function(){
            // 每当用户点击/输入时就将前一个定时器删除
            clearTimeout(timeID)
            // 然后创建一个新的定时器
            // 如果用户在这个时间间隔内在此操作的话
            // 函数将不会被执行
            timeID =  setTimeout(() => {
                console.log(`你输入的值是${this.value}`);
            },1000)
        }
        // 执行后我们发现：当我们在输入框持续输入内容时控制台
        // 不会打印东西，当我们在设置的时间间隔一秒内没有进行输入操作的话
        // 控制台会将我们输入的值打印出来
    script>
body>

若不加入防抖，则我们每次在输入框里输入一个字符，控制台都会打印依次“你输入的值是…” ，而加入了防抖之后，若我每次在输入框中输入三个字符便停顿一次，那么在我们设置的这个时间间隔一秒之后，这个函数才会被执行一次，相应的语句被打印一次。

 

 节流

代码实现如下：

    <input type="text" id="shuru">
    <button onclick="btnClick()">此处节流button>
    <script>
        var lastTime = null
        function btnClick(){
            // 获取当前时间
            var currentTime = Date.now()
            // 从上一次到现在，还剩下多少多余时间
            if(currentTime - lastTime >= 3000){
                console.log('被点击了');
                // 将当前时间赋值给lastTime继续记录时间间隔
                lastTime = currentTime
            }
        }   
    script>
body>

无论我们点击得多么频繁，语句也只会三秒再打印一次。 

 

 

 ♡ ‧₊˚  应用  ‧₊˚ ♡

防抖在连续的事件，只需触发一次回调的场景有：

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

节流在间隔一段时间执行一次回调的场景有：

• 滚动加载，加载更多或滚到底部监听
• 搜索框，搜索联想功能