Остановите задержку setTimeout при первом запуске - PullRequest
Новая
       6

Остановите задержку setTimeout при первом запуске

0 голосов
/ 05 января 2012

Итак, я создаю скрипт, который добавляет облака, плавающие по странице на моем сайте.Однако, как видно из в этом примере , появление первого облака задерживается (на 10-12 секунд) на setTimeout в spawn_cloud_loop.Есть ли способ заставить первое облако быть добавлено мгновенно без задержки.Я пытался добавить add_cloud(); до spawn_cloud_loop();, но задержка все еще там.Проект в целом можно найти на https://github.com/JordanAdams/jordanadams.github.com, а код облачного эффекта - на js/clouds.js.

Иордании

1 Ответ

4 голосов
/ 05 января 2012

Ваш clouds.js скрипт включается в заголовок, а затем add_cloud(); запускается немедленно.Это означает, что вы создаете новое облако и пытаетесь добавить его в div «clouds», который не существует, потому что он еще не был проанализирован.Второе и последующие облака созданы нормально, потому что функция spawn_cloud_loop() имеет такую ​​большую задержку, что документ был проанализирован тогдашним пользователем.

Вам нужно либо переместить включение скрипта clouds.js вниз где-то нижеdiv "clouds" в исходном коде вашей страницы или поместите вызов add_cloud(); в обработчик готовности документа, чтобы он не выполнялся до тех пор, пока не будет проанализирован div "clouds": 

$(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()из готового документа.)

Кроме того, вам вообще не понадобится процесс clean_up(), если вы сразу удалите каждое облако в конце анимации из * 1022 метода jQuery .animate().* полный обратный вызов: 

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