关于节流阀的思路

最新推荐文章于 2024-02-08 09:25:20 发布

胡小生

最新推荐文章于 2024-02-08 09:25:20 发布

阅读量2.7k

点赞数 1

分类专栏： javascript

本文链接：https://blog.csdn.net/u011128736/article/details/53048703

版权

本文探讨了节流阀的思想，用以控制如动画运行等频繁触发的事件。通过比喻阀门控制水流，阐述如何在事件开始时仅执行一次函数并阻止后续触发，待条件满足后再开启。文中以切换单张轮播图为例，提供了相关的HTML、CSS和JavaScript代码示例。

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

关于节流阀的理解

前言：总是感叹于自己的记性真的和鱼一样。果然像我这样平凡的人，还是只能靠烂笔头啊。今天记录一下节流阀的思想，和实现方法。

想象一下有一个开关，控制着动画的运行。就像阀一样，阀开着水才能流出。同样的，我们也可以设一个(阀)flag=true;。在事件的开头处，判断if(flag){flag=false;do somenthing}阀打开的情况下运行函数，并且把开着的水龙头关掉flag=false;让事件无法连续触发，最后事件结尾判断动画如果如果结束，再打开阀flag=true。

下面是一个切割轮播图的例子：

html

<body>
<div class="box">
    <ul>
        <li><img src="imgs/01.jpg" alt=""></li>
        <li><img src="imgs/02.jpg" alt=""></li>
        <li><img src="imgs/03.jpg" alt=""></li>
        <li><img src="imgs/04.jpg" alt=""></li>
    </ul>
    <ul>
        <li><img src="imgs/01.jpg" alt=""></li>
        <li><img src="imgs/02.jpg" alt=""></li>
        <li><img src="imgs/03.jpg" alt=""></li>
        <li><img src="imgs/04.jpg" alt=""></li>