【性能优化】函数的防抖与节流

最新推荐文章于 2022-05-17 22:09:21 发布

疆子

最新推荐文章于 2022-05-17 22:09:21 发布

阅读量515

点赞数 1

文章标签：性能优化前端 javascript

本文链接：https://blog.csdn.net/jiang_ziy/article/details/122805325

版权

本文通过手风琴案例展示了未进行防抖优化时的抖动问题，解释了函数防抖的概念和实现步骤，以及其在鼠标移入/移出事件中的应用，以提升用户体验和减少资源浪费。同时，对比介绍了函数节流的原理和应用场景，如用于降低高频事件的触发频率。最后，给出了搜索框输入事件中应用防抖的实例，进一步阐述了防抖技术的实际运用。

摘要由CSDN通过智能技术生成

函数防抖

用手风琴案例演示,做防抖优化前和优化后的区别

简易手风琴案例(防抖优化前 )

图片资源地址:https://github.com/jiang-zi/Optimize-anti-shake-/tree/master/images

    <style>
      ul {
        list-style: none;
      }

      * {
        margin: 0;
        padding: 0;
      }

      div {
        width: 1200px;
        height: 400px;
        margin: 50px auto;
        border: 1px solid red;
        overflow: hidden;
      }

      div li {
        width: 240px;
        height: 400px;
        float: left;
        transition: all 500ms;
      }

      div ul {
        width: 1200px;
      }
    </style>
  </head>

  <body>
    <div id="box">
      <ul>
        <li>
          <a href="#">
            <img src="./images/1.jpg" alt="" />
          </a>
        </li&g