JavaScript的防抖

最新推荐文章于 2024-08-08 15:58:10 发布

Leisure_Time

最新推荐文章于 2024-08-08 15:58:10 发布

阅读量170

点赞数

分类专栏： JS 文章标签： JavaScript html5 防抖

本文链接：https://blog.csdn.net/weixin_45615791/article/details/103831747

版权

JS 专栏收录该内容

43 篇文章 1 订阅

订阅专栏

利用定时器来实现防抖，这样可以避免重复提交，或者重复请求

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>防抖</title>
	</head>
	<body>
		<button>提交</button>
		<script type="text/javascript">
			//创建要执行的函数
			function add() {
				console.log('啊哈哈')
			}
			//创建防抖函数
			function debounce(fn, timer) {
				//创建变量接受定时器
				let settime = null
				return function (...args) {
					//如果定时器存在， 则清除
					if(timer) clearTimeout(settime)
					settime = setTimeout(() => {
						//使用apply的方法改变this指向， 如果有参数则传参
						fn.apply(this, args)
					}, timer)
				}
			}
			//用一个变量接受调用函数
			const ofangdou = debounce(add, 1000)
			let btn = document.querySelector('button')
			//添加点击事件， 并传入指向函数
			btn.addEventListener('click', ofangdou)
			//	如果重复点击， 只会指向最后的点击
		</script>
	</body>
</html>