美文网首页
JavaScript函数节流与函数防抖

JavaScript函数节流与函数防抖

作者: LeeYaMaster | 来源:发表于2019-05-16 23:40 被阅读0次

    函数节流

    节流就是, 不管怎么触发,都是按照指定的间隔来执行。
    应用场景:
    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)
      }
    }
    

    相关文章

      网友评论

          本文标题:JavaScript函数节流与函数防抖

          本文链接:https://www.haomeiwen.com/subject/rcjgaqtx.html