防抖
什么是防抖
简单来说就是 对于短时间内连续触发的事件,防抖的含义是让某个时间期限内,事件只触发一次
我们在写项目代码的时候,有时因为某些需求,需要根据一定条件进行触发事件(比如你要时时监听一个input框内容的变化,来访问后台给出提示)。当我们进行监听后会发现,每一次变化都会去访问后台一次,而我们想要的是触发结束后,一定时间内没有再发生改变才进行触发。
function 防抖函数名(callback, time) { //callback是你打算执行的函数,time是延迟的时间
let timer = null; //利用闭包来防止污染作用域
return function() {
if (timer) { //如果重复触发就清除计时器
clearTimeout(timer)
}
timer = setTimeout(callback, time) //第一次触发时设置一个计时器,如果重复触发就清除计时器再重新设置一个计时器,如果没有再触发那么第一次设置的计时器照常触发
}
}
节流
什么是节流
和防抖类似,节流是当函数执行一次后,一定时间内使其无法执行,过了这段时间后再使其可以触发
最常见的例子就是我们在注册账号时,发送手机验证码的时候,一般都是一定时间内只能获取一次。
function 节流函数名(callback,time){ //同上
let flag = true //声明一个变量,给他一个状态
return function() {
if(!flag){
//状态是真的时候 不触发 直接返回false
return false
}
flag = false //第一次会触发 然后状态改成假
setTimeout(() => { //生成一个计时器,在计时器执行完成之前,状态一直是假,所以不会再触发callback(),只有计时完成的时候才会触发一次callback(),并把状态改回真,使其可以重新触发
callback()
valid = true;
}, delay)
}
}