一个在JavaScript 轮播中常见的bug以及解决方法_javascript定时器制作轮播图有卡顿现象

作者：AllinToyou | 2024-02-20 20:56:53

踩

javascript定时器制作轮播图有卡顿现象

在制作JavaScript轮播中，会遇到很多的bug，以下这个bug也是个比较常见的bug。轮播在运行时，当你快速点击按钮切换图片时，这个bug会造成图片的卡顿和混乱，非常影响轮播效果。

存在的问题：当点击按钮的速度比图片切换的速度快时，就算你不点击它也还会把剩下的点击给执行完，而且当在它自动播放时，快速按和它运动方向相反的按钮时，它会在下一屏和上一屏之间卡死。
如下图所示：
在这里插入图片描述

解决方法：
1）先声明一个是否在运动的变量：
在这里插入图片描述
2）然后设置当进入轮播动画函数开始的值为true，说明我正在调用块代码，用完之后在轮播动画结束函数的值为false（在else里面写），说明动画执行完成了:

3）还有在它点击事件和自动播放里加一个判断，判断它是否在运动，if当它在运动时被点击就return返回一个空，然后它就不会继续执行后面的代码了：
在这里插入图片描述

然后这个问题就解决了，切换时也不会再图片卡顿混乱了。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/AllinToyou/article/detail/120872