节流防抖
归纳知识点
给dom绑定事件,事件触发执行操作函数。但是事件许多种,由于事件本身特性触发频率也大不相同,比如click跟onload事件相比,click可以随用户高兴一秒触发5次,onload确实页面加载完成被动触发一次。其实我们并不希望触发那么多次事件(耗费性能),就需要给事件的执行加一些限制。
这里说的是节流和防抖函数
- 节流
将频繁的事件触发限制为delay之后的一次。由于考虑到如果一直在delay的时间内,那么函数永远不会触发。还需要一个duration来约定最大等待时间。
function throttle(method, delay, duration){
var timer = null
var begin = new Date()
return function () {
var content = this
var args = arguments
var now = new Date()
if(timer) clearTimeout(timer)
if(now - begin >= duration) {//最大延时
method.apply(content,args)
begin = now
} else {
timer = setTimeout(() => {//防抖
method.apply(content,args)
}, delay);
}
}
}
function abc(){
console.log("一个操作")
}
window.onscroll = throttle(abc,500,1000)
可以看出如果在delay(500ms)时间内如果再进行操作,将会clear上个操作重新执行setTimeout。如果上次执行的时间与当前时间超过duration(1000ms)也会执行操作。
- 防抖
函数防抖的应用场景,最常见的就是用户注册时候的手机号码验证和邮箱验证了。只有等用户输入完毕后,前端才需要检查格式是否正确,如果不正确,再弹出提示语。
目的与节流一样,是缩减回调执行频率。区别在于防抖只执行一次(delay时间),多次化一次;而节流是限制执行时间间隔,每多长时间(wait)执行一次,多次化wait间隔的多次。
function debounce(method, wait=50, immediate=true ){
let timer ,context, args
const later = ()=> setTimeout(()=>{//定义延迟函数
timer = null
if(!immediate) {//判断非立即才执行
method.apply(context, args)
context = args = null
}
},wait)
return function (...params) {
if(!timer) { //之前没有操作就创建一个延迟函数
timer = later()
if(immediate) {
method.apply(context, args)
} else {
context = this
args = params
}
} else { //之前有就清除
clearTimeout(timer)
timer = later()
}
}
}
可以看出。节流函数和防抖函数写法上的区别就是是否有duration