setTimeout不会触发？可能是你的DOM还没加载好

前言

在前端开发中，setTimeout函数是延迟执行代码的常用方法。它可以让我们在指定的时间后执行某段代码，从而实现各种动画效果、延迟加载等功能。然而，在某些情况下，setTimeout可能不会触发，导致预期的行为无法实现。本文将深入探讨setTimeout在某些情况下可能不会触发的原因，以及如何解决此问题。我们将以一个在安卓手机的webview中遇到setTimeout不会触发的真实案例作为切入点，分析问题根源并提供解决方案。通过本文，您将掌握如何确保setTimeout在您需要的时候正常触发，从而避免在开发中遇到此类问题。

问题现象

最近在一台安卓手机的webview里面遇到一个神奇的问题，setTimeout不会触发了。起因是笔者用了一个动画库，这个动画库调了它的初始化方法后没有生成DOM元素，经过一番排查，最后发现是有一个地方的setTimeout回调没有执行，如下图所示：

setTimeout(function() {
  console.log('This will not be executed');
}, 1000);

这是为啥呢？经检验setTimeout的回调函数确实没有被调用，而且在调试器中发现，在调用setTimeout方法之后，当前执行栈并没有被挂起，而是直接执行了后面的代码。这显然是不正常的，因为setTimeout本来应该让当前执行栈挂起一段时间，然后才执行回调函数。

问题分析

经过一番排查，笔者终于找到了问题所在：原来是这个动画库在初始化的时候，没有生成DOM元素。这导致在调用setTimeout方法的时候，当前执行栈并没有被挂起，而是直接执行了后面的代码。因为没有DOM元素，所以setTimeout的回调函数也就没有被触发。

解决方案

既然知道了问题所在，那么解决方法也就显而易见了：在调用setTimeout方法之前，确保DOM元素已经生成。我们可以通过以下几种方法来做到这一点：

• 在DOMContentLoaded事件中调用setTimeout方法。
• 在window.onload事件中调用setTimeout方法。
• 使用MutationObserver来监听DOM元素的变化，然后在DOM元素生成后调用setTimeout方法。

总结

通过本文，我们了解了setTimeout在某些情况下可能不会触发的原因，以及如何解决此问题。在实际开发中，我们应该注意在调用setTimeout方法之前，确保DOM元素已经生成。这样可以避免setTimeout的回调函数不被触发，从而导致预期的行为无法实现。