防抖与节流（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中双剑客
