也来谈一谈节流和防抖

最新推荐文章于 2024-10-10 07:00:00 发布

weixin_33884611

最新推荐文章于 2024-10-10 07:00:00 发布

阅读量72

点赞数

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5b0643d06fb9a07ab7749926

本文通过实际案例讲解了JavaScript中函数节流(throttle)与防抖(debounce)的概念及实现方式，展示了如何通过这两种技术优化用户体验并提高程序效率。

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

代码只有敲一遍看到结果才会印象深刻，so实践一遍吧

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		#box{
			width: 100%;
			height: 300px;
			background: pink;
		}
	</style>
</head>
<body>

	<div id="box"></div>	
	<script>

	function throFun(){
		console.log('执行真正的函数')
	}
    # 这里可以点击粉色区域，更换函数debounce感受一下不同
	var thro = throttle (throFun,1000);

	box.addEventListener('click' , function(){
		thro();
	})

	# 函数节流
	function throttle (func,delay){
		var prev = Date.now();
		return function(){
			console.log('被触发')
		    var context = this;
		    var args = arguments;
		    var now = Date.now();
		    if(now-prev>=delay){
		        func.apply(context,args);
		        prev = Date.now();
		    }
		}
	}
	# 函数节流给人的感受是上次执行时间和第二次执行时间相隔一定秒。否则不会被执行真正的函数
	# 上面函数返回是一个闭包，prev不会被清除掉，并且每次prev都会更新为最后一次执行的时间
	# 要么不会执行，要么就立即执行不会等待
	

    
    # 函数防抖
	function debounce(method,time){
		var timer = null;
		return function(){
			console.log('被触发')
			var context = this;
			//在函数执行的时候先清除timer定时器;
			
			console.log(timer)
			clearTimeout(timer);
			timer = setTimeout(function(){
				method.call(context);
			},time);
		}
	}
	# 防抖给人的感受是执行后等待一定时间才会被执行
	# 如果在等待的时间内又被触发，以最后的为准 因为上次的被clear掉了
    # 总之一定会等待规定时间秒才会被执行
	

	</script>
</body>
</html>
复制代码