Js函数防抖与节流

最新推荐文章于 2025-06-10 09:45:49 发布

原创最新推荐文章于 2025-06-10 09:45:49 发布 · 470 阅读

0 ·

CC 4.0 BY-SA版权

前端同时被 2 个专栏收录

27 篇文章

订阅专栏

JavaScript

9 篇文章

订阅专栏

函数的防抖跟节流都是用在代码的优化里面的。

函数的节流是指：在一定时间内执行一次该函数，而不是由用户频繁触发而不断执行，从而达到优化性能。（例如实现图片懒加载时的滚动事件）

函数的防抖是指：在用户频繁触发的时刻下，等候一定的时间，才来执行该函数。（例如在用户不断输入用户名进而验证的情况下）

1. 函数的防抖

原理很简单：利用setTimeout(); 使用户在每次输入时，清除前面的定时器，并再设置另一个全新的定时器，当用户停下操作，当前定时器没有被清除，等待时间达到time对应的时间，才执行 fn 函数。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 </head>
 7 <body>
 8     <p>js防抖</p>
 9     <input type="text" name="input_one" id = "input_one">
10     <input type="text" name="input_two" id = "input_two">
11 <script>
12 function debounce(fn , time = 300) {
13     let timeout = null;
14     return function() {
15         clearTimeout(timeout);
16         timeout = setTimeout(function(){
17             fn.apply(this, arguments);
18         },time);
19     };
20 }
21 
22 function print() {
23     console.log('run');
24 }
25 
26 const input_one = document.getElementById('input_one');
27 input_one.addEventListener('keyup', debounce(print));
28 
29 const input_two = document.getElementById('input_two');
30 input_two.addEventListener('keyup', print);
31 
32 </script>
33 </body>
34 </html>

效果如下：

可以看出，在第一个input输入框，即使用户频繁输入数据，最终只是在相应的一段时间之后，才执行了run。而在第二个input输入框里面，用户输入多少次，则执行相应的函数多少次，这是很折损性能的。

2. 函数的节流

通过设置相应的一个变量，以及利用 setTimeout() 使得相应的时间里才执行相应的函数。

 1 function debounce(fn ,time = 300) {
 2     let run = true;
 3     return function() {
 4         console.log('test');
 5         if(!run) return;
 6         run = false;
 7         setTimeout(function() {
 8             fn.apply(this, arguments);
 9             run = true;
10             console.log('scroll');
11         }, time);
12     };
13 }
14 
15 //监听文档滑动事件
16 document.onscroll = debounce(checkImage);

效果如下：