防抖和节流（详解）使用场景和区别

大家好，欢迎来到IT知识分享网。

文章目录

一、防抖（多次触发只执行最后一次）
- 1. 防抖的应用场景
- 2. 防抖的实现思路
一、节流（规定时间内只触发一次）
- 1. 节流的应用场景
- 2. 节流的实现思路
总结 (简要答案)

一、防抖（多次触发只执行最后一次）

防抖策略（debounce）是当事件被触发后，延迟n秒后再执行回调，如果在这n秒内事件又被触发，则重新计时。

作用：高频率触发的事件，在指定的单位时间内，只响应最后一次，如果在指定的时间内再次触发，则重新计算时间。

1. 防抖的应用场景

登录、发短信等按钮避免用户点击太快，以致于发送了多次请求，需要防抖
调整浏览器窗口大小时，resize 次数过于频繁，造成计算过多，此时需要一次到位，就用到了防抖
文本编辑器实时保存，当无任何更改操作一秒后进行保存

2. 防抖的实现思路

实现代码：

 // 防抖函数 function debounce(fn, wait) { 
    let timer; return function() { 
    let _this = this; let args = arguments; if(timer) { 
    clearTimeout(timer) } timer = setTimeout(function(){ 
    fn.apply(_this, args) }, wait); } } // 使用 window.onresize = debounce(function() { 
   console.log('resize')}, 500)

应用示例：

<body> <input type="text" id="inp"> <script> // 1.封装防抖函数 防抖重在清零 clearTimeout(timer) function debounce(fn, time) { 
    // 4.创建一个标记用来存放定时器的返回值 let timeout = null; return function () { 
    // 5.每当用户触发input事件 把前一个 setTimeout 清楚掉 clearTimeout(timeout); // 6.然后又创建一个新的 setTimeout, 这样就能保证输入字符后等待的间隔内 还有字符输入的话，就不会执行 setTimeout里面的内容 timeout = setTimeout(() => { 
    // 7.这里进行防抖的内容 fn(); }, time); }; } // 2.获取inpt元素 var inp = document.getElementById('inp'); // 8. 测试防抖临时使用的函数 function sayHi() { 
    console.log('防抖成功'); } // 3.给inp绑定input事件 调用封装的防抖函数 传入要执行的内容与间隔事件  inp.addEventListener('input', debounce(sayHi, 5000)); </script> </body>

一、节流（规定时间内只触发一次）

节流策略（throttle），控制事件发生的频率，如控制为1s发生一次，甚至1分钟发生一次。与服务端(server)及网关(gateway)控制的限流 (Rate Limit) 类似。

作用：高频率触发的事件,在指定的单位时间内，只响应第一次。

1. 节流的应用场景

鼠标连续不断地触发某事件（如点击），单位时间内只触发一次；
监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断。例如：懒加载；
浏览器播放事件，每个一秒计算一次进度信息等

2. 节流的实现思路

实现代码：

 // 方式1: 使用时间戳 function throttle1(fn, wait) { 
    let time = 0; return function() { 
    let _this = this; let args = arguments; let now = Date.now() if(now - time > wait) { 
    fn.apply(_this, args); time = now; } } } // 方式2: 使用定时器 function thorttle2(fn, wait) { 
    let timer; return function () { 
    let _this = this; let args = arguments; if(!timer) { 
    timer = setTimeout(function(){ 
    timer = null; fn.apply(_this, args) }, wait) } } }

应用示例：

 <script> // 1.封装节流函数（使用定时器） 节流重在加锁 timer=timeout function throttle(fn, time) { 
    //3. 通过闭包保存一个 "节流阀" 默认为false let temp = false; return function () { 
    //8.触发事件被调用 判断"节流阀" 是否为true 如果为true就直接trurn出去不做任何操作 if (temp) { 
    return; } else { 
    //4. 如果节流阀为false 立即将节流阀设置为true temp = true; //节流阀设置为true //5. 开启定时器 setTimeout(() => { 
    //6. 将外部传入的函数的执行放在setTimeout中 fn.apply(this, arguments); //7. 最后在setTimeout执行完毕后再把标记'节流阀'为false(关键) 表示可以执行下一次循环了。当定时器没有执行的时候标记永远是true，在开头被return掉 temp = false; }, time); } }; } function sayHi(e) { 
    // 打印当前 document 的宽高 console.log(e.target.innerWidth, e.target.innerHeight); } // 2.绑定事件，绑定时就调用节流函数  // 敲黑板！！！ 这里是重点 绑定是就要调用一下封装的节流函数 触发事件是触发封装函数内部的函数 window.addEventListener('resize', throttle(sayHi, 2000)); </script>

总结 (简要答案)

防抖：防止抖动，单位时间内事件触发会被重置，避免事件被误伤触发多次。代码实现重在清零 clearTimeout。防抖可以比作等电梯，只要有一个人进来，就需要再等一会儿。业务场景有避免登录按钮多次点击的重复提交。
节流：控制流量，单位时间内事件只能触发一次，与服务器端的限流 (Rate Limit) 类似。代码实现重在开锁关锁 timer=timeout; timer=null。节流可以比作过红绿灯，每等一个红灯时间就可以过一批。

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/115222.html

防抖和节流（详解） 使用场景和区别

文章目录

一、防抖 （多次触发 只执行最后一次）