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

╰+攻爆jí腚メ 2022-12-05 10:10 170阅读 0赞

有这样一种应用场景，在滚动事件中做一个复杂取值计算或者频繁的触发一个事件，这是很影响性能并容易导致页面卡顿的，所以要合并多次请求，通过函数做一个精确操作。这时就会用到函数防抖或者函数节流，那么，这两种方式有什么区别呢？

个人认为：  
函数防抖是：当你频繁触发后，n秒内只执行一次  
函数节流是：在固定的时间内触发事件，每隔n秒触发一次

# 一、防抖 #

触发高频函数事件后，n秒内函数只能执行一次，如果在n秒内这个事件再次被触发的话，那么会重新计算时间

*  思路：

每次触发事件时都取消之前的延时调用方法

function debounce(fn) { 
                let timeout = null; // 创建一个标记用来存放定时器的返回值
                return function() { 
                    clearTimeout(timeout); // 每当用户输入的时候把前一个 setTimeout clear 掉
                    timeout = setTimeout(() => {  // 然后又创建一个新的 setTimeout, 这样就能保证输入字符后的 interval 间隔内如果还有字符输入的话，就不会执行 fn 函数
                        fn();
                    }, 500);
                };
            }
    
            function sayHi() { 
                console.log('防抖成功');
            }
            let box = document.getElementById('box')
            box.addEventListener('click', debounce(sayHi))

# 二、节流 #

高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率

*  思路：

在一定的事件内只执行一次触发事件。

function throttle(fn) { 
        let canRun = true; // 通过闭包保存一个标记
        return function () { 
            if (!canRun) return; // 在函数开头判断标记是否为true，不为true则return
            canRun = false; // 立即设置为false
            setTimeout(() => {  // 将外部传入的函数的执行放在setTimeout中
                fn();
                // 最后在setTimeout执行完毕后再把标记设置为true(关键)表示可以执行下一次循环了。当定时器没有执行的时候标记永远是false，在开头被return掉
                canRun = true;
            }, 500);
        };
    }
    function sayHi(e) { 
        console.log('节流');
    }
    window.addEventListener('resize', throttle(sayHi));

# 应用场景： #

## debounce ##

*  search搜索联想，用户在不断输入值时，用防抖来节约请求资源。
 *  频繁操作点赞和取消点赞，因此需要获取最后一次操作结果并发送给服务器

## throttle ##

*  鼠标不断点击触发，mousedown(单位时间内只触发一次)
 *  window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用节流来让其在一定时间内触发一次

发表评论取消回复

表情：

评论列表（有 0 条评论，170人围观）

还没有评论，来说两句吧...

相关阅读

相关什么是防抖和节流？有什么区别？如何实现？

[原连接地址][Link 1] 防抖触发高频事件后 n 秒内函数只会执行一次，如果 n 秒内高频事件再次被触发，则重新计算时间；思路：

小咪咪/ 2023年01月13日 04:13/ 0 赞/ 161 阅读

相关防抖和节流实现原理

防抖或是节流：限制函数的执行次数 1. 防抖：通过 `settimeout`的方式，在一定的时间间隔内，将多次触发变成一次触发 <!DOCTYPE html>

╰+哭是因爲堅強的太久メ/ 2022年12月29日 06:19/ 0 赞/ 158 阅读

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

有这样一种应用场景，在滚动事件中做一个复杂取值计算或者频繁的触发一个事件，这是很影响性能并容易导致页面卡顿的，所以要合并多次请求，通过函数做一个精确操作。这时就会用到函数防抖或

╰+攻爆jí腚メ/ 2022年12月05日 10:10/ 0 赞/ 171 阅读

相关 [JavaScript]什么是防抖和节流？有什么区别？如何实现？

什么是防抖和节流？有什么区别？如何实现？一、防抖触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间思路：

Dear 丶/ 2022年11月30日 01:33/ 0 赞/ 159 阅读

相关说说函数节流和防抖？有什么区别？如何实现？

一、是什么本质上是优化高频率执行代码的一种手段如：浏览器的 resize、scroll、keypress、mousemove 等事件在触发时，会不断地调用绑定在事

Myth丶恋晨/ 2022年11月16日 13:57/ 0 赞/ 58 阅读

相关前端面试系列-JavaScript-防抖与节流(用节流优化防抖)

文章目录一.函数防抖二、函数节流 1.时间戳实现 2.定时器实现 3.用节流优化防抖(定时器+时间戳) 三、

刺骨的言语ヽ痛彻心扉/ 2022年11月12日 11:58/ 0 赞/ 190 阅读

相关节流防抖

/ fn [function] 需要防抖的函数 delay [number] 毫秒，防抖期限值 / function debounce(fn,delay){

今天药忘吃喽~/ 2022年11月04日 12:24/ 0 赞/ 228 阅读

相关防抖和节流实现

防抖 1. 在事件被触发后 n 秒再执行回调，如果在这 n 秒内又被触发，则重新计时 2. 实现 / 防抖在事件被触发后 n 秒再执行回调，如果在这

客官°小女子只卖身不卖艺/ 2022年09月08日 14:51/ 0 赞/ 198 阅读

相关什么是防抖和节流？有什么区别？如何实现？

一部分的用户行为会频繁的触发事件执行，而对于DOM操作，资源加载等耗费性能的处理，很有可能导致界面卡顿，甚至浏览器的崩溃，防抖和节流就是解决这种问题的 1. 防抖 > 触

╰+哭是因爲堅強的太久メ/ 2021年12月05日 15:29/ 0 赞/ 381 阅读

相关函数节流与防抖实现

问题引出：什么是函数节流？什么是函数防抖？ 1. 函数节流函数节流：一个函数执行一次后，只有大于设定的时间周期才会执行第二次。函数节流限制一个函数在一定时间内

不念不忘少年蓝@/ 2021年11月10日 20:22/ 0 赞/ 374 阅读