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

Dear 丶 2022-11-30 01:33 121阅读 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 条评论，121人围观）

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

相关阅读

相关什么是防抖和节流？

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

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

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

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

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

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

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

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

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

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

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

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

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

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

相关 JavaScript 节流和防抖

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

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

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

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

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

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

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

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

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

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

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

相关 js 防抖是什么 JavaScript防抖怎么用

JS防抖其实也是用来提升网页性能的一种技术写法防抖就是指当用户触发某个操作时，如果在指定的时间内再次触发该操作，那么就清除前面触发的操作，直到用户操作之后并且在指定的时间

深藏阁楼爱情的钟/ 2021年10月19日 06:48/ 0 赞/ 344 阅读