確保Javascript函數和回調按正確的順序執行

我有一個包含以下設置的頁面。我遇到了計時問題，因爲我在頭文件中調用了一個函數，在函數體中稍後定義。我需要確保doSomething(stuff)僅執行一次myScript.js並且評估最終腳本標記。確保Javascript函數和回調按正確的順序執行

有些事情我已經試過：

使用window.onload - 有沒有保證的窗口完成加載之前，回調將被執行。
使用setTimeout確定doSomething已定義，並繼續嘗試，直到定義爲止。這有效，但我擔心在慢速連接或繁忙的頁面上需要很長時間並阻止。
定義doSomething在頭以及使用它只是給變量在體內後訪問了分配（我貼下面的代碼顯示該選項）

我應該使用什麼設置正確確保頁面上的所有代碼都按正確的順序執行，並且儘可能快？

<head> 
<script type="text/javascript"> 
    var myQueue = []; 
    myQueue.push(function(){ 
     getSomeStuff({ 
      timeout: 4000, 
      gotStuffCallback: function(stuff){ 
       doSomething(stuff); 
      } 
     }) 
    } 

</script> 
</head> 
<body> 
<!-- a script that takes an undetermined amount of time to execute --> 
<script src="myScript.js"></script> 

<script type="text/javascript"> 
    var doSomething = function(stuff){ 
     // uses code from the external js file myScript.js 
     useMyScript(stuff); 
    }; 
</script> 
</body>

代碼第三個選項：

<head> 
<script type="text/javascript"> 
    var myQueue = []; 

    var headerStuff; 
    var doSomething = function(stuff){ 
     headerStuff = stuff; 
    } 

    myQueue.push(function(){ 
     getSomeStuff({ 
      timeout: 4000, 
      gotStuffCallback: function(stuff){ 
       doSomething(stuff); 
      } 
     }) 
    } 

</script> 
</head> 
<body> 
<!-- a script that takes an undetermined amount of time to execute --> 
<script src="myScript.js"></script> 

<script type="text/javascript"> 
    var doSomething = function(stuff){ 
     var stuff = headerStuff || stuff; 
     // uses code from the external js file myScript.js 
     useMyScript(stuff); 
    }; 
</script> 
</body>

編輯：添加在myQueue前失蹤var。

來源

2016-12-01 ekrah

myScript的標籤是強制性要對文檔的主體？ – Jorge

不一定，但由於它可能需要一段時間才能執行，所以我希望儘可能晚地將其放在頁面上。 – ekrah

'myQueue'在哪裏啓動？ – Bergi

如果你可以使用承諾，並沒有理由不能（你總是可以用藍鳥填充）。

你可以在你的html的頭部創建一個promise，繼續作爲回調並在最後一個javascript塊中解析它。

這裏所說：

<head> 
 
    <script> 
 
    var trigger; 
 
    alert('start') 
 
    new Promise(function(resolve) { 
 
     trigger = resolve; 
 
     }) 
 
     .then(
 
     function() { 
 
      // call your callback here 
 
      alert('callback'); 
 
     }); 
 
    </script> 
 
</head> 
 

 
<body> 
 
    <!-- here goes your long runing script --> 
 

 
    <script> 
 
    alert('finish'); 
 
    trigger(); 
 
    </script> 
 
</body>

來源

2016-12-01 18:52:18

確保Javascript函數和回調按正確的順序執行

回答

相關問題