停止setTimeout延遲第一次運行

Question

因此，我正在創建一個腳本，以添加在我的網站頁面上浮動的雲。 但是，如本例所示 ，第一個雲的出現被spawn_cloud_loop的setTimeout延遲了（10-12秒）。 有什么方法可以強制立即添加第一朵雲而不會造成延遲。 我嘗試添加add_cloud(); 在spawn_cloud_loop();之前spawn_cloud_loop(); 但延遲仍然存在。 整個項目可以在https://github.com/JordanAdams/jordanadams.github.com上找到，有關雲效果的代碼可以在js/clouds.js 。

---

約旦

Answer 1

您的clouds.js腳本包含在頭部，然后add_cloud(); 立即運行。 這意味着您將創建一個新的雲，然后嘗試將其追加到尚不存在的“ clouds” div中，因為尚未對其進行解析。 因為spawn_cloud_loop()函數的延遲時間太長，以至於那時的文檔已被解析，所以創建第二個和后續的雲就可以了。

您需要將clouds.js腳本包含項向下移動到頁面源中“ clouds” div下方的某個位置，或者將add_cloud();放進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 .animate()方法的完整回調中刪除每個雲，則根本不需要clean_up()進程：

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