Question

这是我的代码：

<script src='app.js' defer></script> //very big js file
//lots of html stuff
<script> alert(1);</script>

问题是，它们是异步加载的。有没有办法等待第二个脚本加载第一个脚本？

Answer 1

Defer指示在页面加载之前不执行script标记的内容。因此，我实际上希望首先弹出警报，然后再加载app.js。

在没有延迟的情况下，应该按照放置顺序的顺序同步加载摘要。

Answer 2

如果您使用jQuery，则有一种非常简单的方法可以通过getScript函数来实现。只需在加载后添加需要执行的脚本部分，并将其作为参数传递给函数即可。

$.getScript( "app.js" )
  .done(function( script, textStatus ) {
    console.log( textStatus );
    //your remaining code
  })
  .fail(function( jqxhr, settings, exception ) {
    //script fail warning if you want it
});

Answer 3

您可以通过异步等待来实现

创建一个将它们都包装在一起的JavaScript函数。

const task1 = ()=>{
 // app.js content
}

const task2 = ()=>{
 // alert(1);
}

async function asyncCall(){
  await task1(); // then task2 want start until the task1 finishes
  task2();
};

asyncCall();

您可以使用异步函数来异步执行一个函数

其他资源： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function

您还可以使用JavaScript Promises解决相同的问题，但是我更喜欢async-await函数。他们不那么痛苦。

加载另一个脚本后再加载JS脚本

3 个答案: