谷歌浏览器中，页面最小化和页面展开时定时器时间问题

最新推荐文章于 2024-09-20 16:48:40 发布

Forina_Han

最新推荐文章于 2024-09-20 16:48:40 发布

阅读量1.8k

点赞数

文章标签： js

本文链接：https://blog.csdn.net/qq_45428582/article/details/116904532

版权

在谷歌浏览器中，作者发现一个关于定时器的问题：在页面最小化时，原本设定为每2秒切换的轮播图在恢复时显示异常。经过分析，发现这是因为浏览器在最小化时会将定时器的间隔调整为至少1秒，导致定时任务执行不均匀。解决方案是考虑这种情况并优化代码逻辑。

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

练习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);">