一个在JavaScript 轮播中常见的bug以及解决方法

(作者:杨东升,撰写时间:2019年1月17日)
在制作JavaScript轮播中,会遇到很多的bug,以下这个bug也是个比较常见的bug。轮播在运行时,当你快速点击按钮切换图片时,这个bug会造成图片的卡顿和混乱,非常影响轮播效果。

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

解决方法:
1)先声明一个是否在运动的变量:
在这里插入图片描述
2)然后设置当进入轮播动画函数开始的值为true,说明我正在调用块代码,用完之后在轮播动画结束函数的值为false(在else里面写),说明动画执行完成了:
在这里插入图片描述
3)还有在它点击事件和自动播放里加一个判断,判断它是否在运动,if当它在运动时被点击就return返回一个空,然后它就不会继续执行后面的代码了:
在这里插入图片描述
在这里插入图片描述

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

猜你喜欢

转载自blog.csdn.net/weixin_44544859/article/details/86517970