练习js中,写了一个轮播图事件,轮播四个div,间隔2s自动切换。
为了div之间的过渡不要那么生硬,我设置了0.5s过渡时间,在这0.5s中,我抛出5个settimeout任务,并通过promise保证顺序执行。
之后就出现了很诡异的事情,当我显示着页面时,console.log的时间时很均匀的0,-500px,-1000px(打印了left值,一个轮播div宽度为500),但当我最小化页面在打开时,console.log的打印非常混乱。
页面最小化时错误打印:
页面最大化时的正确打印:
找了几个答案都没有满意的,后来看到一篇文章,说明谷歌浏览器再页面最小化时定时器时间是>=1s的,假设设置的时间小于1s,页面最小化时时间就会产生问题。
贴个大佬的文章链接:当浏览器切换到其他标签页或者最小化时,你的js定时器还准时吗?
最后贴个代码
<main>
<div id="bg">
<div id="bg1" style="background-color: antiquewhite;"></div>
<div id="bg2" style="background-color: aqua;"></div>
<div id="bg3" style="background-color: aquamarine;"></div>
<div id="bg4" style="background-color: rgb(184, 184, 9);">