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)
  }
}
上一篇下一篇

猜你喜欢

热点阅读