防抖和节流
防抖和节流的区别?
防抖:触发高频事件后n 秒内 函数只会执行一次,如果n秒内 高频事件在在次触发,则会重新计算
节流:高频事件触发,但在n 秒内 只会执行一次,所以节流会稀释函数的执行频率
下面就是代码相关的显示:
防抖代码:
适用场景:
登录、发送短信等按钮避免用护点击过快,以至于发送了多次请求,需要防抖
调整浏览器窗口大小时,resize 次数过于频繁,造成计算过多,此时需要一次 到位,就用到了防抖,
文本编辑器事实保存,当前无任何操作一秒后进行保存
防抖原理代码如下:
1.定义一个函数,里面分别会传入两个参数:参数1:处理的函数,参数2:等待时间
2.定义一个外部局部变量
3.返回一个函数(这个函数实际是一个闭包)
4.判断这个任务是否存在,如果有就把之前的取消掉
5.然后创建一个新的任务,在里面去执行这个函数(记住改变this,如果不改变会出现作用域的一个情况)
var square=document.querySelector(".square")function debounce(fn,wait){ //参数1: 处理函数,参数2:等待时间//1.定义一个变量let timeout;return function(){ //定义一个返回的函数:闭包
//2.如果这个定时任务存在,就把这个定时任务取消掉,
if(timeout) clearTimeout(timeout)//取消之前的无效任务:大概的意思是判断有没有这个任务的存在,那我就把之前的任务给去掉//3.然后重新创建一个任务,然后在这个里面去执行这个函数timeout=setTimeout(()=>{fn.apply(this);},wait)}
}
//使用:假如我们这里调用的是事件
search.onkeyup=debounce(count,2000)//闭包,这个return 返回函数才是我们正真的结果
节流代码如下:
使用场景:
scroll 事件,每隔一秒计算一次位置信息等
input 框 事实搜索 并发送请求展示下拉列表,每隔一秒发送一次请求
节流原理代码如下:
1.判断有没有定时任务,如果定时任务不存在,就要创建一个定时任务
2.创建任务之后,在清除任务,在执行任务
function throttle(fn,wait){
let timeout;
return function(){
//判断如果没有定时任务,定时任务不存在,就要创建一个定时任务
if(!timeout){
timeout=setTimeout(()=>{
//清除任务
timeout=null;
fn()
},wait)
}
}
}
search.onkeyup=throttle(count,2000)//闭包,这个return 返回函数才是我们正真的结果