• 性能优化之节流

    实现方式：

    1.lodash提供的节流函数来处理

    2.手写一个节流函数来处理

    需求：鼠标在盒子上移动，不管移动多少次，每隔500ms才+1

    方法一：lodash提供的节流函数来处理

    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.     <script src="./js/lodash.min.js"></script>
    23.     <div class="box"></div>
    24.     <script>
    25.         // 利用防抖实现性能优化
    26.         // 需求：鼠标在盒子上移动，鼠标停止500ms之后，里面的数字就会变化+1
    27.         const box = document.querySelector('.box')
    28.         let i = 1
    29.         function mouseMove() {
    30.             box.innerHTML = i++
    31.         }
    32.         // mousemove鼠标移动事件
    33.         // 鼠标一移动就500ms后就触发debounce事件，i就++
    34.         // 语法： _.throttle(fun,时间)
    35.         box.addEventListener('mousemove', _.throttle(mouseMove, 500))
    36.     </script>
    37. </body>
    38.  
    39. </html>

    方法二：手写一个节流函数来处理

     实现方式：

            节流的核心就是利用定时器setTimeout来实现

            1声明一个定时器变量

            2每次事件触发时都先判断是否有定时器了，如果有则不开启定时器

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

              定时器里面调用执行的函数

              定时器里面要把定时器清空

    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.         // 手写一个节流函数
    33.         // 节流的核心就是利用定时器setTimeout来实现
    34.         // 1声明一个定时器变量
    35.         // 2每次事件触发时都先判断是否有定时器了，如果有则不开启定时器
    36.         // 3如果没有定时器则开启定时器，存到变量里面
    37.         //   定时器里面调用执行的函数
    38.         //   定时器里面要把定时器清空
    39.         function throttle(fn, t) {
    40.            let timer = null
    41.            return function(){
    42.               if(!timer){
    43.                 timer = setTimeout(function(){
    44.                     fn()
    45.                     // 时间到了才去清空，时间没到就不能清空，所以要写在里面
    46.                     timer = null
    47.                 },t)
    48.               }
    49.            }
    50.         }
    51.         box.addEventListener('mousemove', throttle(mouseMove, 500))
    52.         // 有括号的函数会直接执行的不用鼠标滑动，所以当鼠标滑动时需要有一个return
    53.         // 在setTimeout中是无法删除定时器的，因为定时器还在运作，所以使用timer=null而不是clearTimeout(timer)
    54.     </script>
    55. </body>
    56.  
    57. </html>

  • 相关阅读:
    【RLHF个人笔记】RLHF:Reinforcement Learning from Human Feedback具体过程
    深入思考JAVA虚拟机，实现从0到1的突破
    SpringCloud-Eureka-介绍+非集群式搭建
    MapReduce
    qiankun-boot 一个开箱即用的 qiankun cli
    卷积神经网络的基本操作,卷积神经网络理论基础
    探秘 | 简说IP地址以及路由器的功能究竟是什么？
    Material Design 风格的 UI 框架 Vuetify 使用初体验
    Multi-task Classification Model Based On Multi-modal Glioma Data
    20个最佳实践提升Terraform工作流程｜Part 2
  • 原文地址：https://blog.csdn.net/weixin_52512511/article/details/133246538