确保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。

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>

确保Javascript函数和回调按正确的顺序执行

相关推荐