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

Dear 丶 2022-11-30 01:33 172阅读 0赞

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

#### 一、防抖 ####

**触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间**

*  思路：  
    动作绑定事件，动作发生后一定时间后触发事件，在这段时间内，如果该动作又发生，则重新等待一定时间再触发事件。

function debounce(fn) { 
          let timeout = null; // 创建一个标记用来存放定时器的返回值
          return function () { 
            clearTimeout(timeout);
             // 每当用户输入的时候把前一个 setTimeout clear 掉
            timeout = setTimeout(() => {  
            // 然后又创建一个新的 setTimeout, 这样就能保证输入字符后的 interval 间隔内
            // 如果还有字符输入的话，就不会执行 fn 函数
              fn.apply(this, arguments);
              //因为sayHi函数是在全局中运行，this默认指向了window
              //所以要用apply将inp的this传入
            }, 500);
          };
        }
        function sayHi() { 
          console.log('防抖成功');
        }
    
        var inp = document.getElementById('inp');
        inp.addEventListener('input', debounce(sayHi)); // 防抖

举个例子，假如你有一个需求是用户在input框中输入一串字符后，自动发一个ajax请求，如果不做防抖，则用户每次改变字符串(删掉字符或输入新字符)都会发送一次请求，但是如果做防抖处理，当用户输入一个字符后，过了0.5秒也没有改变字符串（这大概率表示用户已经完成字符串输入），则发送请求，如果在0.5秒内改变了字符串（这大概率表示当前字符串不是用户要输入的最终字符串），则暂不发送请求，继续重新计算0.5秒，直到用户停顿超过了0.5秒，再发送请求。

#### 二、节流 ####

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

*  思路：  
    动作绑定事件，动作发生后一段时间后触发事件，在这段时间内，如果动作又发生，则无视该动作，直到事件执行完后，才能重新触发。

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

#### 三、结合应用场景 ####

*  **debounce(防抖)**

1.  search搜索联想，用户在不断输入值时，用防抖来节约请求资源。
2.  window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次

*  . **throttle(节流)**

1.  鼠标不断点击触发，mousedown(单位时间内只触发一次)
2.  监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断

发表评论取消回复

表情：

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

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

相关阅读

相关什么是防抖和节流？

防抖 1. 指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间 2. 应用场景：用户注册时候的手机号验证和邮箱验证；...

系统管理员/ 2024年04月17日 05:41/ 0 赞/ 87 阅读

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

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

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

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

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

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

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

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

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

相关节流和防抖的区别，以及如何实现

1. 防抖 > 触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间实现方式：每次触发事件时设置一个延迟调用方法，并且取消之前的延时

女爷i/ 2022年11月21日 01:05/ 0 赞/ 187 阅读

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

防抖：连续触发事件，只要不是最后一次触发，就不执行异步操作 <button>点我试试</button> <script> var btn = do

谁借莪１个温暖的怀抱￠/ 2022年11月19日 07:45/ 0 赞/ 45 阅读

相关 JavaScript 节流和防抖

JavaScript 节流和防抖 JavaScript 节流和防抖节流 1. 简单的节流函数防抖

向右看齐/ 2022年11月17日 14:59/ 0 赞/ 260 阅读

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

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

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

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

![a74118fd21c6f0c14ae7a5220595436c.png][] 一、是什么本质上是优化高频率执行代码的一种手段如：浏览器的 `resize`、

分手后的思念是犯贱/ 2022年11月11日 10:56/ 0 赞/ 203 阅读

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

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

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