JavaScript函数节流与函数防抖
2019-05-16 本文已影响0人
LeeYaMaster
函数节流
节流就是, 不管怎么触发,都是按照指定的间隔来执行。
应用场景:
1、监听页面滚动,因为页面滚动是一个高频触发的事件。
2、按钮,防止用户重复多次点击。
原理:声明一个布尔值当标志位,记录当前代码是否在执行,如果在执行,判断布尔值是否为false,如果是,那么不进入这个方法。方法执行完后,把布尔值设为true,即可再次调用。
function throttle(func, wait) {
var timer
return function() {
var context = this
var args = arguments
if (!timer) {
timer = setTimeout(function () {
timer = null
func.apply(context, args)
}, wait)
}
}
}
函数防抖
防抖就是,函数执行过一次后,在n秒内不能再次执行,否则推迟函数执行 。
生活上的例子:坐电梯,假如上电梯时,进来一个人,要等10秒钟,才能开,在等待的过程中,再上来一个人,这个时候,又要等10秒钟,这就是原理。
原理:和函数节流一样,也是采用一个布尔值,只是增加的是,下一次函数调用将清除上一次的定时器,并用setTimeout重新计时。
function debounce(func, wait) {
var timer
return function() {
var context = this
var args = arguments
clearTimeout(timer)
timer = setTimeout(function() {
func.apply(context, args)
}, wait)
}
}