1、节流
自己规定一个时间,在这个规定时间内,某事件被触发多次,但是这个事件只执行一次
//节流
//用定时器实现节流函数
Throttle=(func, wait)=>{
let timeout;
return function() { //形成一个闭包
let context = this;
let args = arguments;
if (!timeout) {
timeout = setTimeout(() => {
//setTimeout()函数是延时器,用于在指定的毫秒后调用函数和计算表达式,且只用于执行一次
//setInterval()函数是定时器,每个指定的毫秒后调用函数和计算表达式,可循环执行,可用clear来清除定时器
timeout = null;
func.apply(context, args)
}, wait)
}
}
}
//func 为需要调用的方法 1000为1秒内只执行一次
this.Throttle(this.func,1000)
2、防抖
触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间
//防抖函数
Debounce=(func, wait)=> {
let timeout; // 创建一个标记用来存放定时器的返回值
return function () {
timeout && clearTimeout(timeout) // 每当用户输入的时候把前一个 setTimeout clear 掉
// 然后又创建一个新的 setTimeout, 这样就能保证输入字符后的 interval 间隔内如果还有字符输入的话,就不会执行 func 函数
timeout = setTimeout(() => {
func.apply(this, arguments)
}, wait)
}
}
//func 为需要调用的方法 1000为1秒内只执行一次 如果重新触发则重新计算时间
this.Debounce(this.func,1000))