防抖与节流

Ther. 飞

于 2022-07-12 09:10:12 发布

阅读量201

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/m0_66482551/article/details/125735465

版权

防抖与节流是不一样的,防抖是多次执行变成最后一次执行,节流是将多次执行变成间隔一段时间执行.

防抖:是当事件被触发后,延迟n秒后再执行回调,如果在这n秒内,事件有被触发,则重新计时常见的场景如:搜索框

步骤:1.获取页面中input DOM元素并监听input每次输入的内容

2.封装一个防抖函数,定义一个防抖的timer延迟器并置为空,先清除延时器,确保连续多次触发但只执行最后一次定时器

3. 模拟请求数据

<body>
		<h2>js防抖</h2>
		<input type="text" placeholder="请输入内容" />
	</body>
	<script>
	//防抖与节流是不一样的,防抖是多次执行变成最后一次执行
	                    //节流是将多次执行,变成每隔一段时间执行 
							  
	// 获取inp标签
	let inp=document.querySelector('input');
	addEventListener('input',debounce(demo,2000))
	
	
	// 防抖封装
	function debounce(fn,wait){
		let timer=null;
		return function(){
			if(timer) clearTimeout(timer) //先清空定时器
			timer =setTimeout(fn,wait)
		}
	}
	// 每次输入内容都在清除定时器和创建定时器,直到你不在输入的时候就等2000毫秒之后进行执行函数,请求
	
	//模拟请求
	function demo(){
		console.log('发起请求')
	}
	</script>

节流是:throttle() 可以减少一段时间内事件的触发频率; 可以通过两种方式来写节流一种是通过事件戳,另一种是通过定时器,如何判断什么时候用时间戳,什么时候用定时器呢?

利用时间戳:如果需求就是第一次触发事件就需要执行一次回调函数

如下代码:

<body>
	<h2>js节流</h2>
	<div class="box"></div>
</body>
<script>
 
    
    let box=document.querySelector('div');//获取标签DOM
	box.addEventListener('mousemove',throttle(demo,1500))
    监听鼠标移动事件,设置节流

    //事件被频繁触发时,利用事件戳,设置一个过去的时间,和返回一个现在的时间,
    //当现在的时间-去已过去的时间大于你设置的时间,就执行函数请求,但这种有一个

   // 通过(事件戳)来写节流第一次触发时通过程序执行的时间,而不是事件第一次触发的起始时间
	function throttle(fn,time){
		let  record=Date.now();
		
		return function(){
			let   now=Date.now();//程序为起始时间
			let  interval=now-record;
			if(interval>time){
				fn();
				record = now;
			} 
		}
	}

function demo(){
	console.log('请求数据')
}
</script>
<style>
.box{
	width:200px;
	height:200px;
	background:cyan;
}
</style>

利用定时器:如果需求是一用户第一次触发事件为起始时间进行节流

<body>
	<h2>js节流</h2>
	<div class="box"></div>
</body>
<script>
    let box=document.querySelector('div');//获取标签DOM
	box.addEventListener('mousemove',throttle(demo,1500))
    //监听鼠标移动事件,设置节流


   function  throttle(fn,time){
		let done=false; //初始化没有定时器 ,事件触发的时间为起始时间
		return function(){
			if(!done){
				setTimeout(()=>{
					fn();
					done=false; //设置为false,在下一个周期的时候没有定时器
				},time)
				done=true;//有定时器了设置为true
			}
		}
	}
	function demo(){
		console.log('请求数据')
	}
</script>
<style>
.box{
	width:200px;
	height:200px;
	background:cyan;
}
</style>

这就是防抖与节流的一些小案例!!!