函数防抖 debounce

最新推荐文章于 2024-11-07 13:38:59 发布

weixin_30496431

最新推荐文章于 2024-11-07 13:38:59 发布

阅读量53

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/love314159/p/7655894.html

版权

本文介绍了一种常用的前端技术——防抖(debounce)，通过限制函数触发频率来提高用户体验和程序性能。文章提供了一个具体的实例，展示了如何使用jQuery实现按钮点击事件的防抖效果，并解释了其背后的实现原理。

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
	</head>
	<body>
		
		<button class="btn">点击</button>
		<script src="jquery.min.js"></script>
		<script>
　　　　　　　　　　//按钮点击出发防抖动的函数 debounce
			$(".btn").on("click",debounce(Click,1000))
			function debounce (fn, duration){　　//fn(你要防止抖动的函数) duration:(毫秒数)
				 var timer = null;
				 return function (){
				 	 clearTimeout(timer)
				 	 timer=setTimeout(function(){
				 	 	fn()
				 	 },duration)
				 }
				  
			}
　　　　　　　　　　//你要运行函数
			function Click(){				
				console.log(1)
				//todo something
			}
		</script>
	</body>
</html>

转载于:https://www.cnblogs.com/love314159/p/7655894.html