Question

我有一个页面，其中包含以下设置。我在计时方面遇到了问题，因为我正在通过标题中的回调调用一个稍后在正文中定义的函数。我需要确保doSomething(stuff)仅执行一次myScript.js并评估最终的脚本标记。

我尝试过的一些事情：

使用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>

修改：在var前添加了遗失myQueue。

Answer 1

如果您可以使用承诺，并且没有理由不能（您可以随时使用蓝鸟进行填充）。

您可以在html的头部创建一个承诺，继续作为回调并在最后一个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函数和回调

1 个答案: