函数防抖和函数节流

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

lwz4070

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

阅读量504

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/lwz4070/article/details/81176363

本文详细介绍了函数防抖和函数节流的概念及其应用场景。函数防抖适用于频繁触发但只需执行一次的情况，如用户输入验证；而函数节流则确保在一定时间内只执行一次，适合处理滚动事件等高频触发情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、函数防抖

函数防抖是指频繁触发的情况下，只有足够的时间，才执行代码一次，函数防防抖的要点也是要一个setTimeout来辅助实现，延迟执行需要跑的代码。如果方法多次触发，则把上次记录的延迟执行代码用clearTimeout清理掉，重新开始。如果计时完毕，没有方法来访问触发。则执行代码。

函数防抖的应用场景，最常见的就是用户注册时候的手机号码验证和邮箱验证了。只有等用户输入完毕后，前端才需要检查格式是否正确，如果不正确，再弹出提示语

2、函数节流
函数节流是指一定时间内js方法只跑一次，函数节流的要点是，声明一个变量当标志位，记录当前代码是否在执行。如果空闲，则可以正常触发方法执行，如果代码正在执行，则取消这次方法执行，直接return。
函数节流应用的实际场景，多数在监听页面元素滚动事件的时候会用到。因为滚动事件，是一个高频触发的事件。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
        #box{
        	height: 1000px;
        	width: 1000%;
        	background-color: skyblue;
        }
	</style>
</head>
<body>
<div id="box"></div>
	<script type="text/javascript">
       //函数防抖
   
       /*var timer = false;
       window.onscroll = function(){
       	clearTimeout(timer);//// 清除未执行的代码，重置回初始化状态
       	timer = setTimeout(function() {
       		console.log("这是函数防抖")
       	}, 100);
       }*/

       //函数节流
      
         var timer = true;
         window.onscroll = function(){
         	if(!timer){ //  判断是否已空闲，如果在执行中，则直接return
         		return;
         	}
         	timer = false;
         	setTimeout(function(){
              console.log("这是函数节流");
              timer = true;
         	},300);
         }
	</script>
</body>
</html>