停止 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()函数有很长的延迟，以至于到那时文档已经被解析了。

您需要将包含的 cloud.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(); });