JS节流和防抖

最新推荐文章于 2024-07-20 14:49:34 发布

ICQ1206

最新推荐文章于 2024-07-20 14:49:34 发布

阅读量112

点赞数

分类专栏： web前端文章标签： javascript 前端 css3

本文链接：https://blog.csdn.net/weixin_43956427/article/details/123212917

版权

web前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

-----------------------------------------------------
为按钮绑定操作
var btns = []
for(var i = 0; i < 3; i++) {
	btns[i] = function() {console.log(i)} 
}
console.log(btns[0]()) // 3
// 闭包
var btns = []
for(var i = 0; i < 3; i++) {
   // 立刻执行 返回函数 i的值被闭包了
	btns[i] = (function(i) {return function() {console.log(i)}})(i)
}
console.log(btns[0]())  // 0
------------------------------------------------------
防抖
防止在短时间内执行函数多次
思路：在第一次触发事件时，不要立刻执行函数，而是等待一定时间，再来检测在这个一定时间内有没有再次触发，如果有，那么继续等待一定时间，如果没有，则执行函数
最终效果：短时间内大量触发事件，最终只执行一次
实现如下：
@param: fn[function] 需要防抖的函数
@param： delay[number] 期限时间 毫秒
function debounce(fn, delay) {
	let timer = null
	return function() {
		if(timer) clearTimeout(timer)
		timer = setTimeout(fn, delay)	
	}
}
测试
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button type="button" id="btn">防抖</button>
		<script type="text/javascript">
			function debounce(fn, delay) {
				let timer = null
				return function() {
					if(timer) clearTimeout(timer)
					timer = setTimeout(fn, delay)
				}
			}
			function alertMsg() {
				alert('hello')
			}
			document.getElementById('btn').onclick = debounce(alertMsg, 10000)
		</script>
	</body>
</html>

最终效果是：10秒内点击多少次 都只执行一次

------------------------------------------------------
节流
效果：短时间内大量触发同一事件，执行一次后 在指定的时间内不再执行，指定时间过后再次生效
function throttle(fn, delay) {
	let state = true
	return function() {
		if(! state) return false
		state = false
		fn()
		setTimeout(() => {
			state = true
		}, delay)
	}
}
测试
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button type="button" id="btn">节流</button>
		<script type="text/javascript">
			// 点击节流按钮后 执行一次函数后 指定时间内不再执行
			function alertMsg() {
				alert('hello')
			}
			document.getElementById('btn').onclick = throttle(alertMsg, 10000)
			function throttle(fn, delay) {
				let state = true
				return function() {
					if(! state) return false
					state = false
					fn()
					setTimeout(() => {
						state = true
					}, delay)
				}
			}
		</script>
	</body>
</html>

-------------------------------------------------------