• 防抖与节流


    防抖节流傻傻分不清楚概念,总是弄混了,平时还好,要使用的时候google一下就明白了,可是面试要是说反了,那就死翘翘了,对于简单的知识点,分数一定要拿稳。

    节流

    当持续触发事件时,保证一定时间段内只调用一次事件处理函数(秉着开源节流的生活观,虽然我天天逛某宝,可是限制自己一个月只能买一件,此乃节流)

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8"/>
        <title>节流</title>
    </head>
    <body>
    <div id="app" style="height:600px"></div>
    <script>
        window.onload = function() {
           function testFn() {
               console.log('触发')
           }
           function commonFn(value) {
               let time = null
               return function() {
                   if (!time) {
                        time = setTimeout(() => {
                            testFn()
                            time = null;
                        }, value);
                   }
                    
               }
           }
           window.addEventListener('scroll', commonFn(2000))
        }
    </script>
    </body>
    </html>

    防抖

    当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定的时间到来之前,又一次触发了事件,就重新开始

    
    
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>抖动</title>
    </head>
    <body>
    <div id="app" style="height:1000px"></div>
    <script>
     function commonFn(value) {
      let time = null;
      return function() {
       clearTimeout(time)
       time = setTimeout(() => {
         console.log('触发了')
       }, value)
      }
     }
     window.addEventListener('scroll', commonFn(1000))
    </script>
    </body>
    </html>
     
  • 相关阅读:
    magento模板中XML与phtml关系 [四]
    magento 好好玩
    凹凸曼的修改zencart 程序(经典!)
    首页商品图片显示错位,easy-popular批量上传
    1.7-BGP①
    1.6-路由的控制③
    1.6-路由的控制②
    1.6-路由的控制①
    1.5
    1.4-动态路由协议OSPF⑧
  • 原文地址:https://www.cnblogs.com/Tiboo/p/11795788.html
Copyright © 2020-2023  润新知