美文网首页
javascript设计模式——节流模式

javascript设计模式——节流模式

作者: 蟹老板爱写代码 | 来源:发表于2018-04-07 10:54 被阅读0次

    节流模式:对重复的业务逻辑进行节流控制,执行最后一次操作并取消其他操作,以提高性能
    代码实现:监听滚动事件,出现卡顿问题,因为scorll事件频繁调用回调。可以通过节流模式,减少回调次数。

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>节流器模式</title>
      <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
      <script>
        var throttle = function () {
          var isClear = arguments[0], fn
          // 如果第一个参数是boolean烈性,那么第一个参数则表示是否清除计时器
          if (typeof isClear === 'boolean') {
            fn = arguments[1]
            fn._throttleID && clearTimeout(fn._throttleID)
          } else {
            fn = isClear
            // 第二个参数为函数执行参数
            param = arguments[1]
            arguments.callee(true, fn)
            fn._throttleID = setTimeout(function () {
              fn.apply(null, param)
            }, 300)
          }
        }
    
        function moveScroll () {
          var top = $(document).scrollTop()
          console.log(top)
        }
        $(window).on('scroll', function () {
          throttle(moveScroll)
        })
    
      </script>
    </head>
    <body>
      <div style="height: 2000px;"></div>
    </body>
    </html>
    

    相关文章

      网友评论

          本文标题:javascript设计模式——节流模式

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