setInterval 页面闪烁，怎么解决

Question

setInterval 页面闪烁，怎么解决，想在前端做个定时任务，但页面在定时任务执行时会闪烁，setTimeout也一样

Answer 1

以下回复引自免费微信小程序：皆我百晓生。 如问题解决，还请采纳。如仍有疑问，请回复留言或私信博主，以便获得更精准的帮助。

使用JAVASCRIPT的SETINTERVAL方法可以实现页面闪烁的效果，但是可能会导致不必要的UI阻塞。为了避免这个问题，可以尝试以下几种方式：

1. 使用CSS动画：通过设置TRANSITION属性来控制元素的过渡效果，可以在不同时间段内暂停和恢复元素的外观。

2. 使用SETTIMEOUT：当某个函数完成之后，它会自动调用另一个函数来处理结果，这样可以避免不必要的UI阻塞。

3. 使用异步操作：如果可能的话，可以使用FETCH或XMLHTTPREQUEST等异步请求来代替SETINTERVAL或者SETTIMEOUT来获取数据，这样可以减少UI阻塞。

4. 优化DOM结构：确保所有需要的元素都正确地放置在正确的位置，以减少不必要的UI阻塞。

5. 确保你的项目是可维护的：如果可能的话，尽量将一些功能放在一个独立的组件中，并且对这些组件进行适当的文档注释和测试。

6. 分析并修复可能导致闪屏的问题：检查一下代码中的错误点，确保所有的逻辑都是正确的，然后进行相应的调试。

7. 使用浏览器的性能监控工具：有些浏览器提供了内置的性能监控功能，可以帮助你了解哪些行为会导致闪屏。

8. 调整渲染策略：如果你的渲染策略不适当，也可能导致闪屏。例如，你可能没有正确地加载和渲染元素，这也会导致闪屏。

9. 使用WEB WORKER：如果可能的话，考虑使用WEB WORKERS来处理异步任务，这样可以有效减少UI阻塞。

10. 使用CSS动画库：对于更复杂的动画需求，可以考虑使用CSS动画库，如FLEXBOX、BOXSHADOW、ZINDEX等。

以上方法都需要根据具体的场景和环境进行调整和实践，希望对你有所帮助！