因此,我正在创建一个脚本,以添加在我的网站页面上浮动的云。但是,如在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(); });