前端必会的防抖和节流

最新推荐文章于 2024-07-12 16:27:40 发布

你也喜欢干饭吗？

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量171

点赞数

分类专栏：专署小抄文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/silencer_hu666/article/details/128052587

版权

专署小抄专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<input type="" name="" id="" value="" />
		<button type="button" class="btn">提交</button>
	</body>
</html>


<script>
	// 第三个参数 一个是事件捕获阶段 一个阶段是事件冒泡阶段
	let btn =  document.getElementsByClassName('btn')[0]
	btn.addEventListener('click', throttle(submit,2000))
	
	function submit (e){
		console.log(e)
		console.log(1)
	}
	
	//  question  arguements this 指向的问题
	//  第一次点击的时候 定时器
	// 在一定事件内 多次触发变成一次触发。
	
	// 节流 减少频率 当前触发的频率

	function debouce(fn, timer, triggleNow){
		var t = null
		return function(){
			if(t){
				clearTimeout(t)
			}
			
			if(triggleNow) {
				var firstClick = !t
				if(firstClick) {
					fn.apply(this, arguments)
				}else {
					t = setTimeout(()=>{
					   t = null
					},timer)
				}
			}
			t = setTimeout(()=>{
				fn.apply(this, arguments)
			},timer)
		}
	}
	
	
	// delay 延时时间内只能触发一次
	function throttle (fn, delay){
		let begin = 0;
		return function(){
			let current = new Date().getTime()
			if(current - begin > delay){
				fn.apply(this, arguments)
				begin = current
			}
			
		}
	}
</script>