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

防抖与节流

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

防抖

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

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

  1. window 的 resize、scroll
  2. mousedown、mousemove
  3. keyup、keydown
  4. 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旭  阅读(144)  评论(0)    收藏  举报