函数的防抖和节流

最新推荐文章于 2022-11-16 22:00:42 发布

Zhu Xiaopi

最新推荐文章于 2022-11-16 22:00:42 发布

阅读量120

点赞数 2

文章标签： js

本文链接：https://blog.csdn.net/qq_46063425/article/details/118653421

版权

本文介绍了JavaScript中两种重要的函数优化技术——防抖(debounce)和节流(throttle)。防抖技术用于限制函数的执行频率，确保在用户频繁触发事件后只执行最后一次；节流则是在设定的时间间隔内只执行一次函数，避免频繁操作。通过代码实例，展示了如何实现这两个功能，并提供了封装好的防抖和节流函数。对于性能敏感的前端应用，理解和运用防抖与节流至关重要。

摘要由CSDN通过智能技术生成

函数的防抖

什么是函数的防抖？它是指当用户频繁的多次触发事件变成为最后一次触发事件
看看代码分析

<script>
	let inp = document.getELementById('#input');
	let t = null;   //这里定义全局的变量t用来存放用来存放定时器
	inp.oninput = function(){
		if(t !=null){
			clearTimeout(t);//取消定时器，如果连续触发事件，就会取消上一次的定时器
		}	
		t = setTimeout(()=>{ //每次触发事件，就会生成一个定时器
			console.log(this.value);
		},3000) //该定时器在3秒后开始执行回调函数的代码
	}
</script>

上面的代码，可以进行封装，代码如下：

<script>
	let inp = document.getElementById('#input');
		inp.oninput = debounce(function(e){
		console.log（e.value)
},5000）

	//封装防抖函数
	function debounce (fn ,delay){
		let t = null;
		return function(){
			if(t != null){
				clearTimeout(t)
			}
			t = setTimeout(()=>{
				fn(this)
			},delay);
		}
	}
</script>

这里用到的setTimeout是创建一个定时器，clearTimeout是将指定的定时取消掉。了解setTimeout和clearTimeout详情，点击这

函数的节流

什么是函数的节流？它是指用户在多触发事件时变为在一定的时间间隔触发一次事件。

	let flag = true //定义一个变量用来判断，是否执行触发事件
		window.onscroll = function(){
	 	if(flag){    
				setTimeout(()=>{
				console.log("hello")
					flag =true  // 触发事件后三秒，flag标记为true，如果有事假触发，久执行if语句
				},3000)
			}
		 flag=false
		 }

下面是节流函数的封装：

	window.onscroll = jieliu(function(){
			console.log("hello")
		},3000);
		
		
		//封装节流函数
		function jieliu(fn,delay)
		{
			let flag = true
			return function(){
				if(flag)
				{
					setTimeout(()=>{
						fn();
						flag =true;
					},delay);
				}
				flag =false
			}
		}

以上就是小白对函数的防抖和节流的理解，如果对你有帮助，是我的荣幸，创作不易，希望能够得到客观的点赞和收藏^~^