Fatal编程技术网
  • javascript/
  • 如何在加载下一个javascript之前等待加载一个javascript

如何在加载下一个javascript之前等待加载一个javascript

javascript

如何在加载下一个javascript之前等待加载一个javascript,javascript,Javascript,我想知道如何在加载下一个脚本之前等待加载一个脚本。例如（实际上也将另一个页面完全加载到该页面中）： 文件3:script2.js console.log("Starting script 2"); function revealTime(){ console.log("Oh, I just wasted 5 seconds of my life AGAIN") ; variable1 = "Pizza"; } //This script is just wasting time

我想知道如何在加载下一个脚本之前等待加载一个脚本。例如（实际上也将另一个页面完全加载到该页面中）：

文件3:script2.js

console.log("Starting script 2");
function revealTime(){
    console.log("Oh, I just wasted 5 seconds of my life AGAIN") ;
    variable1 = "Pizza";
}

//This script is just wasting time
setTimeout(revealTime,5000);
文件4:index2.html

<html>
<script src="js/jquery-3.2.1.min.js"></script>

<script>
    document.write("The variable is:"+variable1);   
</script>
</html>


编写（“变量为：”+variable1）；
首先，目标是等待脚本完成，以便在将变量写入页面之前，变量可以获得一个值。上述代码并非如此

将其放入文档中。就绪：

$.ajax({
  url: url1,
  dataType: "script",
  success: () => {
     $.ajax({
       url: url2,
       dataType: "script",
       success: () =>{
         // do the stuff you need
       }
   });
  }
  });
您可以通过一起使用
Promise
和连锁操作来解决此问题

如果你做了一个添加脚本的函数，然后告诉你什么时候完成

比如：

function addScript(url){
  return new Promise((resolve, reject) => {
    console.log("Download", url);
    var script = document.createElement("script")
    script.type = "text/javascript";
    script.onload = function(){
      console.log(`Download done (${url})`);
      resolve(1);
    };

    script.src = url;
    document.getElementsByTagName("head")[0].appendChild(script);
  });
}
定义所有需要的脚本，我只是用vue做了一个无用的例子

const scripts = [
  "https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js",
  "https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.1/vue-router.js"
];
连续的

您在问题中提出的要求-在当时下载，延迟下载下一个脚本，直到第一个脚本完成

const tasks = scripts[Symbol.iterator]();

function addAllScripts(callback){
  const url = tasks.next().value;
  if(url){
    addScript(url).then( () => { addAllScripts(callback); } );
  }else{
    callback();
  }
};
addAllScripts(() => {
  console.log("Ready");
  new Vue({
    el: '#app',
    template: '<p>hello world</p>'
  });
});

const tasks=scripts[Symbol.iterator]（）；
函数addAllScripts（回调）{
const url=tasks.next（）.value；
如果（url）{
addScript（url）.then（（）=>{addAllScripts（callback）；}）；
}否则{
回调（）；
}
};
addAllScripts（（）=>{
控制台日志（“就绪”）；
新Vue({
el:“#应用程序”，
模板：“hello world
”
});
});

函数addScript（url）{
返回新承诺（（解决、拒绝）=>{
日志（“下载”，url）；
var script=document.createElement（“脚本”）
script.type=“text/javascript”；
script.onload=函数（）{
log（`Download done（${url}）`）；
决议（1）；
};
script.src=url；
document.getElementsByTagName（“head”）[0].appendChild（脚本）；
});
}
常量脚本=[
"https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js",
"https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.1/vue-router.js"
];
const tasks=scripts[Symbol.iterator]（）；
函数addAllScripts（回调）{
const url=tasks.next（）.value；
如果（url）{
addScript（url）.then（（）=>{addAllScripts（callback）；}）；
}否则{
回调（）；
}
};
addAllScripts（（）=>{
控制台日志（“就绪”）；
新Vue({
el:“#应用程序”，
模板：“hello world
”
});
});

这正是上面的代码所要做的。你对它有什么问题？我在我的评论中添加了一些信息，你能检查一下我是否理解正确吗？它没有完全按照我想要的那样工作，首先，脚本2没有等待脚本1在加载到页面之前完成它的内容。我想我会将代码粘贴到我的文件中，以显示我所做的工作。如果设置setTimeout，则是的，第二个脚本在5秒内调用script1 setTimeout函数之前开始加载，因为问题是，它无法控制script1中发生的事情。这是另一个人的工作，我不能改变。但我不想在他的脚本正确执行之前加载我的东西。在这种情况下，您需要等到所有setTimeout人员在script1中完成。如果你不能修改脚本，我们就没有别的办法了。你写了非常好的代码，我就是不懂。也许我还没有足够的java开发经验…javascript*；）-你不明白哪一部分，那么我可以试着把它弄清楚一点。关于顺序解决方案的代码片段。也许你可以在每一行写上一些关于正在发生的事情的评论。我也不确定代码执行的流程，它从哪里开始，从哪里结束，等等。我的意思是，你可以使用承诺、回调和我不知道的对象Vue（）。所有东西都是我不知道如何正确使用的东西：pAh是的，当然，你不需要Vue的东西，就像我加载的脚本是Vue一样，所以只是为了演示脚本。但你可以在这里看到一些评论：

function addScript(url){
  return new Promise((resolve, reject) => {
    console.log("Download", url);
    var script = document.createElement("script")
    script.type = "text/javascript";
    script.onload = function(){
      console.log(`Download done (${url})`);
      resolve(1);
    };

    script.src = url;
    document.getElementsByTagName("head")[0].appendChild(script);
  });
}



const scripts = [
  "https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js",
  "https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.1/vue-router.js"
];



const tasks = scripts[Symbol.iterator]();

function addAllScripts(callback){
  const url = tasks.next().value;
  if(url){
    addScript(url).then( () => { addAllScripts(callback); } );
  }else{
    callback();
  }
};
addAllScripts(() => {
  console.log("Ready");
  new Vue({
    el: '#app',
    template: '<p>hello world</p>'
  });
});