使用函数节流方法，解决JavaScript中点击动画效果多次点击出现抖动问题。

本文链接：https://blog.csdn.net/weixin_56548715/article/details/129732556

例：使用JavaScript实现一个倒计时效果，点击后开始倒计时，倒计时结束后变回到点击之前的样子。

函数节流前：

<body>
        <button id="btn" onclick="fn()">点我开始倒计时</button>
        <script>
            //使用函数节流方法，解决JavaScript动画抖动问题。
            //添加点击事件函数，就是点击按钮要执行的代码
            function fn() {
                //定义倒计时时长
                var time = 5;
                //点击按钮后，按钮里面的内容发生改变。
                btn.innerHTML = `倒计时 ${ time}s`;
                //使用间隔定时器实现倒计时秒数倒数效果。
                var times = setInterval(function() {
                    //每间隔一秒就让时间time变量减一
                    time--;
                    //每减一秒就对button里面的文本内容重新赋值一遍
                    btn.innerHTML = `倒计时${ time }s`
                    //判断，当时间到零秒的时候停止倒计时，我们就停止定时器
                    if (time === 0) {
                        //停止定时器
                        clearInterval(times);
                        //回到点击前
                        btn.innerHTML = `点击我开始倒计时`;
                    }

                }, 1000); //一秒执行一次
            }
        </script>
    </body>

这时效果已经实现，但是在倒计时过程中如果在进行点击，多个倒计时同时进行，就会出现动画抖动。

为什么会出现这个问题？

在第一次倒计时进行中，再次点击同时会开启新的倒计时，多个同时出现就会来回覆盖按钮内的内容出现抖动现象。

如何解决？

我们给我们的动画添加一个开关，在第一次倒计时进行中的时候，把开关关上，在动画效果结束后再把开关打开，就避免了多个动画同时进行了，抖动也就解决了。

代码实现

<body>
        <button id="btn" onclick="fn()">点我开始倒计时</button>
        <script>
            //使用函数节流方法，解决JavaScript动画抖动问题。
            //设置开关状态，刚开始时是打开状态
            var flag = true;
            //添加点击事件函数，就是点击按钮要执行的代码
            function fn() {
                //如果开关是关闭状态，那么就停止函数运行
                if (flag === false) return
                //设置开关为关闭状态
                flag = false;
                //定义倒计时时长
                var time = 5;
                //点击按钮后，按钮里面的内容发生改变。
                btn.innerHTML = `倒计时 ${ time}s`;
                //使用间隔定时器实现倒计时秒数倒数效果。
                var times = setInterval(function() {
                    //每间隔一秒就让时间time变量减一
                    time--;
                    //每减一秒就对button里面的文本内容重新赋值一遍
                    btn.innerHTML = `倒计时${ time }s`
                    //判断，当时间到零秒的时候停止倒计时，我们就停止定时器
                    if (time === 0) {
                        //停止定时器
                        clearInterval(times);
                        //回到点击前
                        btn.innerHTML = `点击我开始倒计时`;
                        //打开开关
                        flag = true;
                    }
                }, 1000); //一秒执行一次
            }
        </script>
    </body>