函数防抖和函数节流

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

摘要生成于 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>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值