防抖与节流（1）--防抖封装

防抖与节流

对大部分程序员来说对这个已经很熟悉了，因为在我们代码中时常会用到。每次的复习熟系都会有不同的收获

防抖

定义：n 秒后在执行该事件，若在 n 秒内被重复触发，则重新计时 n秒后执行该事件

应用场景：对一些触发比较频繁的事件进行进行处理，防止页面的卡顿

window 的 resize、scroll
mousedown、mousemove
keyup、keydown
input 的 input 事件

如果有这么一个需求是：有一个搜索的input框在每次输入内容时自动会搜索或者有可选的热门话题。当我们监听input 的 input 事件会发现触发次数过多，请求后台过多，造成了资源的浪费。
解决办法就是：防抖 ---减少请求后端的次数

--------------上代码-------------

 <body>
    <input type="text">
    <script>
        let input = document.querySelector("input");
        input.addEventListener('input',function(){
			console.log(this.value);//请求接口
        })
    </script>
</body>

进行防抖处理

 let input = document.querySelector("input");
let time = null;//time用来控制事件的触发
input.addEventListener('input',function(){
	//防抖语句
	if(time !== null){
		clearTimeout(time);
	}
	time = setTimeout(() => {
		console.log(this.value);
	},500)
})

进行封装

 let input = document.querySelector("input");
 
input.addEventListener('input',shake(function(){
	console.log(this.value);//处理数据请求后端
},500)
)
 
function shake(fn,times){
	let time = null;//time用来控制事件的触发
	//形成闭包
	return function(){
	 	if(time !== null){
			clearTimeout(time);
		}
		time = setTimeout(() => {
			fn.call(this);
			//利用call(),让this的指针从指向window 转成指向input
		},times)
	}
}

这是input防抖一个场景的应用。

下回带来的是节流，跟防抖可以称之为js中双剑客

posted @ 2022-06-27 10:55 xiao旭阅读(137) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 防抖与节流（2）---节流封装

· 面试题js之 bind、call、apply

· JS 防抖与节流的思路与实现

· JavaScript防抖和节流

· 浅谈js防抖和节流

阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通

公告

欢迎阅读『防抖与节流（1）--防抖封装』

昵称： xiao旭
园龄： 4年8个月
粉丝： 7
关注： 3

+加关注

2025年3月

日

一

二

三

四

五

六

xiao旭

防抖与节流（1）--防抖封装

防抖与节流

防抖

公告

搜索

常用链接

最新随笔

随笔分类

随笔档案

阅读排行榜

评论排行榜

推荐排行榜

最新评论

	<body>
	<input type="text">
	<script>
	let input = document.querySelector("input");
	input.addEventListener('input',function(){
	console.log(this.value);//请求接口
	})
	</script>
	</body>

	let input = document.querySelector("input");
	let time = null;//time用来控制事件的触发
	input.addEventListener('input',function(){
	//防抖语句
	if(time !== null){
	clearTimeout(time);
	}
	time = setTimeout(() => {
	console.log(this.value);
	},500)
	})

	let input = document.querySelector("input");

	input.addEventListener('input',shake(function(){
	console.log(this.value);//处理数据请求后端
	},500)
	)

	function shake(fn,times){
	let time = null;//time用来控制事件的触发
	//形成闭包
	return function(){
	if(time !== null){
	clearTimeout(time);
	}
	time = setTimeout(() => {
	fn.call(this);
	//利用call(),让this的指针从指向window 转成指向input
	},times)
	}
	}