2021-06-30防抖笔记

最新推荐文章于 2024-09-11 15:33:18 发布

脑子不太灵的鸭头

最新推荐文章于 2024-09-11 15:33:18 发布

阅读量130

点赞数

分类专栏： JavaScript 面试基本知识文章标签： javascript

原文链接：https://blog.csdn.net/weixin_41937552

版权

JavaScript 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

面试基本知识

2 篇文章 0 订阅

订阅专栏

防抖问题

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>防抖</title>
	</head>
	<body>
		输入input: <input type="text" id="input" name="inputE1" value="inputE1"><br>
		<script>
		function request(e){
			//定义一个请求函数
			console.log("request:"+e);
		}
		var inputE1=document.getElementById("input");//没有写id属性
		
		inputE1.addEventListener("keyup",function(e){//事件监听addEventLinstener
			request(e.target.value);
		});
		</script>
	
		<!-- 防抖函数：当事件触发完成之后再延迟触发，并且只触发一次 如果在触发完成之前再次触发，则会再次刷新延迟；也可以理解为如果事件 不触发即不执行，并且只会执行一次，就是定时器最后走的那一次
		也就是例子：假如有个弹簧，你一直往下压只要你不松手就是不会弹出的，弹簧只有在你 松手的那一瞬间才会弹出去；和防抖函数是一样的，只要事件触发没有结束是不会执行的  只有在事件触发后延迟执行一次
		-->
		
		<script>
			//定义方法即要做的事情
			function fun(){
				console.log('onresize')
			}
			//定义事件触发要执行的方法，两个参数分别传入要做的事和定时器的毫秒数
			function debounce(fn,delay){
				//定义一个变量作为等会清除的对象
				var handle;
				//这里用到了闭包，一个函数里面return另一个函数，变量相互牵引导致垃圾回收机制不会销毁handle变量
				return function(){
					//在这里一定要清除前面的定时器 然后创建一个新的定时器
					clearTimeout(handle)
					//最后这个定时器只会执行一次也就是事件触发完成之后延迟500毫秒再触发（这里的变量赋值跟定时器连接，进行地址赋值，一定要重新赋值给handle			）
					handle=setTimeout(function(){
						 fn()
					},delay)
			}
			}
			//给浏览器添加监听事件
			window.addEventListener('resize',debounce(fun,500))
		</script>
	</body>
</html>

脑子不太灵的鸭头

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-06-30防抖笔记

防抖问题<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>防抖</title> </head> <body> 输入input: <input type="text" id="input" name="inputE1" value="inputE1"><br> <script> fu
复制链接

扫一扫

专栏目录