防抖和节流

前端性能优化———防抖和节流

函数防抖（类似于setTimeout）

概念：函数防抖（debounce），就是指触发事件后，在n秒内函数只能执行一次，如果触发事件后在n秒内又触发了事件，则会重新计算函数延执行时间。

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>防抖函数debounce</title>
</head>

<body>
	<button id="btn">提交成功</button>
	<script>
		function success(e){
			console.log('提交成功')
		}
		//防抖函数
		const debounce = (fn,delay) =>{ //1
			let timer =null
			return (...args) =>{ //4
				clearTimeout(timer) //5
				timer = setTimeout(() =>{ //3
					//fn里面this的作用域绑定好，不要被外界修改.
					fn.apply(this,args)  //6
				},delay)
			}
		}
		const oDebounce = debounce(success,1000) //2
		
		let btn =document.getElementById('btn')
		btn.addEventListener('click',oDebounce)

	</script>
</body>
</html>

函数节流（类似于setInterval）

概念：每隔一段时间执行一次

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>函数节流throttle</title>
</head>
<body>
	<button id="btn">提交成功</button>
	<script>
			function success(e){
				console.log('提交成功')
			}
			//函数节流：每隔一段时间执行一次
			const throttle = (fn,delay) =>{ //1
				let flag = true //5
				return (...args) => { //4
					if (!flag) return
					flag = false //6 
					setTimeout(() =>{  //3
						//绑定fn中this的作用域，防止fn被调用的时候this作用域被修改了
						fn.apply(this,args)
						flag = true
					},delay)
				}
			}

			const oThrottle=throttle(success,2000) //2

			let btn =document.getElementById('btn')
			btn.addEventListener('click',oThrottle)

	</script>
</body>
</html>

教程地址：https://www.bilibili.com/video/BV1a4411q7Jx/?spm_id_from=trigger_reload

关于定时器的疑惑
js默认机制，如果在定时器还没有执行完的时候，再次去调用定时器执行的话，第二次调用的方法，定时器就会覆盖掉前一次的定时器。
在每次进入function中，都会调用setTimeout,但是不清理定时器，就调用了多次定时器。
你每点击一次，就会产生一个定时器，而这些定时器是独立运行的，但是他们做的事情却又都是一件事，也就是说同时几个定时器都在做一件事，类似于多线程那种。当一个人做一件事，和很多人同时做一件事，那后者就会让你感觉怎么那么快了。
参考地址：https://q.cnblogs.com/q/97298/

posted on 2020-03-30 20:07 songsong_p_blue 阅读(214) 评论(0) 编辑收藏举报