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

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

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

1.  **防抖**

> 触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间
> 
> 防抖就是在函数需要频繁触发情况时，只有足够空闲的时间，才执行一次（公交司机等人上齐后才出站）

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

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

**  2.节流**

> 高频事件触发，但在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));

发表评论取消回复

表情：

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

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

相关阅读

相关防抖和节流的区别是什么？防抖和节流的实现详解！

文章目录防抖非立即执行版立即执行版双剑合璧版防抖的应用场景节流时间戳版

今天药忘吃喽~/ 2023年01月23日 04:56/ 0 赞/ 207 阅读

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

相关防抖和节流实现

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

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

相关节流和防抖

节流和防抖 > 作用：均是为节约计算机资源而生，也就是归属于优化方面 > 原理：均使用`setTimeout`来存放待执行的函数，很方便的利用它的延时机制来确定合适的

以你之姓@/ 2022年05月11日 10:42/ 0 赞/ 258 阅读

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

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

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