停止 setTimeout 延迟首次运行

Question

因此，我正在创建一个脚本，在我的网站页面上添加漂浮的云。然而，如此示例所示，第一朵云的出现因 setTimeout 延迟（10-12 秒） 在 spawn_cloud_loop 中。有什么办法可以强制立即添加第一个云而不会造成延迟。我尝试在 spawn_cloud_loop(); 之前添加 add_cloud(); 但延迟仍然存在。整个项目可以在 https://github.com/JordanAdams/jordanadams.github 找到。 com 以及 js/clouds.js 中的云效果代码。

---

约旦

Answer 1

您的 clouds.js 脚本包含在头部，然后 add_cloud(); 立即运行。这意味着您创建一个新的云并尝试将其附加到不存在的“云”div，因为它尚未被解析。第二个和后续的云创建正常，因为 spawn_cloud_loop() 函数有很长的延迟，以至于文档已被 then 解析。

您需要将clouds.js脚本包含移动到页面源中“clouds”div下方的某个位置，或者将add_cloud();调用放入文档就绪处理程序中，以便它不会被执行直到解析“clouds”div 后：

$(document).ready(function(){
    add_cloud();
    spawn_cloud_loop();
    clean_up();
});

注意：如果您修改了 spawn_cloud_loop() 来调用，则不需要初始调用 add_cloud()在设置超时之前 add_cloud() ：（

function spawn_cloud_loop () {
    add_cloud();
    setTimeout(spawn_cloud_loop, rand(10000, 12000));
}

当然，您仍然需要从准备好的文档中调用 spawn_cloud_loop() 。）

此外，您不需要 <如果您在动画结束时立即从 删除每个云，则根本不会执行 code>clean_up() 过程jQuery .animate()方法的完整回调：

cloud.animate({ left: window.screen.width+100 },
              50000,
              'linear',
              function(){ $(this).remove(); });