• 性能优化之防抖

    方法1：利用lodash库提供的防抖来处理

    方法2：手写一个防抖函数来处理

    需求：鼠标在盒子上移动，鼠标停止500ms之后，里面的数字才会变化+1

    方法一：利用lodash库实现防抖

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Document</title>
    8.     <style>
    9.         .box{
    10.               width: 500px;
    11.               height: 500px;
    12.               background-color: #ccc;
    13.               color: #fff;
    14.               text-align: center;
    15.               font-size: 100px;
    16.            }
    17.     </style>
    18. </head>
    19. <body>
    20.     <script src="./js/lodash.min.js"></script>
    21.     <div class="box"></div>
    22.     <script>
    23.         // 利用防抖实现性能优化
    24.         // 需求：鼠标在盒子上移动，鼠标停止500ms之后，里面的数字就会变化+1
    25.         const box = document.querySelector('.box')
    26.         let i = 1
    27.         function mouseMove(){
    28.             box.innerHTML = i++
    29.         }
    30.         // mousemove鼠标移动事件
    31.         // 鼠标一移动就500ms后就触发debounce事件，i就++
    32.         // _.debounce语法(fun,时间)
    33.         box.addEventListener('mousemove', _.debounce(mouseMove,500))
    34.     </script>
    35. </body>
    36. </html>

    方法二： 手写一个防抖函数来处理

    思路：

            核心是利用setTimeout定时器来实现

            1声明定时器变量

            2每次事件触发时都要先判断是否有定时器，如果有先清除以前的定时器

            3如果没有定时器则开启定时器存入到定时器变量里面

            4定时器里面写函数调用

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Document</title>
    9.     <style>
    10.         .box {
    11.             width: 500px;
    12.             height: 500px;
    13.             background-color: #ccc;
    14.             color: #fff;
    15.             text-align: center;
    16.             font-size: 100px;
    17.         }
    18.     </style>
    19. </head>
    20.  
    21. <body>
    22.     <div class="box"></div>
    23.     <script>
    24.         // 利用防抖实现性能优化
    25.         // 需求：鼠标在盒子上移动，鼠标停止500ms之后，里面的数字就会变化+1
    26.         const box = document.querySelector('.box')
    27.         let i = 1
    28.         function mouseMove() {
    29.             box.innerHTML = i++
    30.         }
    31.         // 手写防抖函数
    32.         // 核心是利用setTimeout定时器来实现
    33.         // 1声明定时器变量
    34.         // 2每次事件触发时都要先判断是否有定时器，如果有先清除以前的定时器
    35.         // 3如果没有定时器则开启定时器存入到定时器变量里面
    36.         // 4定时器里面写函数调用
    37.         function debounce(fn,t){
    38.           let timer
    39.           //return返回一个匿名函数
    40.           return function(){
    41.              if(timer) clearTimeout(timer)
    42.              timer = setTimeout(function(){
    43.                    fn()  //加小括号调用fn函数
    44.               }, t)
    45.           }  
    46.         }
    47.         box.addEventListener('mousemove',debounce(mouseMove,500))
    48.         // 有括号的函数会直接执行的不用鼠标滑动，所以当鼠标滑动时需要有一个return
    49.     </script>
    50. </body>
    51.  
    52. </html>

  • 相关阅读:
    微信小程序预览图片无法上传问题
    常見算法時間複雜度分析
    STM32 -Bin/Hex文件格式解析
    docker swarm快速部署redis分布式集群
    Math的常用方法
    英伟达GDP游戏芯片研究待续
    2022/08/25 day10：Redis 事务
    Chrome下载离线安装包进行安装
    CSP-J2023入门组第二轮T4：旅游巴士
    UE MotionBlur源码解析
  • 原文地址：https://blog.csdn.net/weixin_52512511/article/details/133240764