javascript - 停止 setTimeout 延迟首次运行

Question

所以我正在创建一个脚本，在我的网站页面上添加漂浮的云。然而，如 this example 所示，第一个云的出现被 spawn_cloud_loop 中的 setTimeout 延迟(10-12 秒)。有什么办法可以强制立即添加第一个云而不会造成延迟。我尝试在 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()。)

此外，如果您在动画结束时立即从 jQuery .animate() method's 中删除每个云，则根本不需要 clean_up() 过程。完整回调:

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