事件防抖

最新推荐文章于 2024-07-25 10:54:43 发布

Jane_96

最新推荐文章于 2024-07-25 10:54:43 发布

阅读量427

点赞数 1

分类专栏： JavaScript 文章标签：事件防抖

本文链接：https://blog.csdn.net/Jane_96/article/details/94061859

版权

JavaScript 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

本文介绍了事件防抖的概念，通过问题引入展示了在输入框输入内容后延迟执行回调函数的需求，讨论了未经优化的解决方案及其性能问题，并提出改进后的事件防抖方法，该方法能有效提高性能，仅在输入停止时触发回调。

摘要由CSDN通过智能技术生成

事件防抖

问题引入

在输入框输入内容后间隔1000ms之后再请求callback

问题解决

直接绑定
下面这段代码，每次输入一个字母就会触发callback，显然性能是比较差的~从配图也能看出来，每次输入都会打印输入框的内容。
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <title>事件节流和事件防抖</title>
    <meta charset="utf-8">
</head>
<body>
    <input type="text" id="ipt">
</body>
<script>
	function callback(e){
		console.log(new Date() , e.target.value);
	}

	let ipt = document.querySelector('input');
	ipt.addEventListener('input' , callback);
</script>
</html>

改进后的方法

改进后的方法，只在输入完之后才调用了callback，在配图中，我在输入完"zhe’ci"之后故意停顿了几秒，在接着输入下文的，所以控制台打印了两次。
在这里插入图片描述

<!DOCTYPE html>
<html>

<head>
    <title>事件节流和事件防抖</title>
    <meta charset="utf-8">
</head>

<body>
    <input type="text" id="ipt">
</body>
<script>

	function debounce (fn , delay = 1000) {
		let preTimeStamp = new Date().getTime();
		let currentTimeStamp = preTimeStamp;
		let content = null;
		let arg = null;
		let sto = null;
		
		let run = () => {
			preTimeStamp = new Date().getTime();
			sto = setTimeout(()=>{
				fn.apply(content , arg);
			} , delay);
		}	
		let clear = () => {
			clearTimeout(sto);
			run();
		}	
		return function(){
			currentTimeStamp = new Date().getTime();
			content = this;
			arg = arguments;
			
			currentTimeStamp - delay > preTimeStamp ? run() : clear();
			
		}
	}

	function callback(e){
		console.log(new Date() , e.target.value);
	}

	let ipt = document.querySelector('input');
	ipt.addEventListener('input' , debounce(callback));
</script>
</html>

总结

事件防抖中，输入框在短时间内输入了大量的内容，只有在最后输入停止时才触发了callback，提高了性能

function debounce (fn , delay = 1000) {
	let preTimeStamp = new Date().getTime();
	let currentTimeStamp = preTimeStamp;
	let content = null;
	let arg = null;
	let sto = null;
	
	let run = () => {
		preTimeStamp = new Date().getTime();
		sto = setTimeout(()=>{
			fn.apply(content , arg);
		} , delay);
	}
	
	let clear = () => {
		clearTimeout(sto);
		run();
	}
	
	return function(){
		currentTimeStamp = new Date().getTime();
		content = this;
		arg = arguments;
		
		currentTimeStamp - delay > preTimeStamp ? run() : clear();
		
	}
}

Jane_96

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
事件防抖

事件防抖问题引入在输入框输入内容后间隔1000ms之后再请求callback问题解决直接绑定下面这段代码，每次输入一个字母就会触发callback，显然性能是比较差的~从配图也能看出来，每次输入都会打印输入框的内容。<!DOCTYPE html><html><head> <title>事件节流和事件防抖</ti...
复制链接

扫一扫

专栏目录