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



约旦

最佳答案

您的clouds.js脚本包含在头部,然后立即运行add_cloud();。这意味着您将创建一个新的云,然后尝试将其追加到尚不存在的“ clouds” div中,因为尚未对其进行解析。因为spawn_cloud_loop()函数的延迟时间太长,因此当时的文档已被解析,所以可以创建第二个和后续的云。

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

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


注意:如果在设置超时之前将add_cloud()修改为调用spawn_cloud_loop(),则不需要初始调用add_cloud()

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


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

另外,如果您在动画的结尾立即从jQuery clean_up() method's完成回调中删除每个云,则根本不需要.animate()进程:

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

07-24 14:49