blocks|key|163320|text|只需创建一个脚本节点，将其src属性设置为要加载的JS，然后将其附加到头部：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|163321|var+myScript+=+document.createElement('script');
myScript.src+=+"thesource.js";
document.head.appendChild(myScript);|code-block|syntax|javascript|163322|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Just create a script node, set its src property to the JS you want to load then append it to the head:

<pre><code>var myScript = document.createElement('script');
myScript.src = "thesource.js";
document.head.appendChild(myScript);
</code></pre>

blocks|key|163356|text|尝试这种方法，使用延迟对象创建数组，并使用带有"apply“的$.when|type|unstyled|depth|inlineStyleRanges|entityRanges|data|163357|var+scripts+=+[
++++'src/script1.js',
++++'src/script2.js'
];

var+queue+=+scripts.map(function(script)+{
++++return+$.getScript(script);
});

$.when.apply(null,+queue).done(function()+{
++++//+Wait+until+done,+then+finish+function
});|code-block|syntax|javascript|163358|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Try this way, create array with deferred objects and used $.when with "apply"

<pre><code>var scripts = [
 'src/script1.js',
 'src/script2.js'
];

var queue = scripts.map(function(script) {
 return $.getScript(script);
});

$.when.apply(null, queue).done(function() {
 // Wait until done, then finish function
});
</code></pre>

blocks|key|163363|text|var+getScript+=+function(url)+{
++++var+s+=+document.createElement('script');
++++s.async+=+true;
++++s.src+=+url;
++++var+to+=+document.getElementsByTagName('script')[0];
++++to.parentNode.insertBefore(s,+to);
};|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|163364|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>var getScript = function(url) {
 var s = document.createElement('script');
 s.async = true;
 s.src = url;
 var to = document.getElementsByTagName('script')[0];
 to.parentNode.insertBefore(s, to);
};
</code></pre>

blocks|key|163415|text|这对我很有效，可能会对你有所帮助。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|163416|$.ajax({
++++async:+false,
++++url:+"jui/js/jquery-ui-1.8.20.min.js",
++++dataType:+"script"
});|code-block|syntax|javascript|163417|基本上，我只是绕过了速记符号，在async:+false中添加了|offset|length|style|CODE|163418|entityMap^0|0|0|G|C|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

This worked for me, and may help you.

<pre><code>$.ajax({
 async: false,
 url: "jui/js/jquery-ui-1.8.20.min.js",
 dataType: "script"
});
</code></pre>

Basically, I just bypassed the shorthand notation and added in the <code>async: false</code>

blocks|key|163492|text|你知道$.getScript+accepts是一个在脚本加载后同步调用的回调函数吗？|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|163493|示例：|163494|$.getScript(url,function(){
//do+after+loading+script
});|code-block|syntax|javascript|163495|我还有两个解决方案:一个是pure+js解决方案，一个是multiple+js+load解决方案。|163496|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/jquery.getscript/|1|https://stackoverflow.com/a/24778028/669677|2|https://stackoverflow.com/a/25328848/669677^0|3|B|F|7|0|0|0|0|D|7|1|S|G|2|0^^$0|@$1|2|3|4|5|6|7|10|8|@$9|11|A|12|B|C]]|D|@$9|13|A|14|1|15]]|E|$]]|$1|F|3|G|5|6|7|16|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|17|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|18|8|@]|D|@$9|19|A|1A|1|1B]|$9|1C|A|1D|1|1E]]|E|$]]|$1|O|3|-4|5|6|7|1F|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]|W|$5|R|S|T|E|$U|X]]|Y|$5|R|S|T|E|$U|Z]]]]

Do you know that <code>$.getScript</code> <a href="http://api.jquery.com/jquery.getscript/" rel="nofollow noreferrer">accepts</a> a callback function that is called synchronously after the script is loaded?

Example:

<pre><code>$.getScript(url,function(){
//do after loading script
});
</code></pre>

I have 2 more solutions: a <a href="https://stackoverflow.com/a/24778028/669677">pure js</a> one and one for <a href="https://stackoverflow.com/a/25328848/669677">multiple js load</a>.

blocks|key|381463|text|这就是我要做的|type|unstyled|depth|inlineStyleRanges|entityRanges|data|381464|function+loadJsFile(filename)+{
++++$.ajaxSetup({
++++++++cache:+true
++++});

++++var+dloadJs+=+new+$.Deferred();
++++$.when(dloadJs).done(function+()+{
++++++++$.ajaxSetup({
++++++++++++cache:+false
++++++++});
++++});

++++dloadJs.resolve(
+++++++++$.getScript(filename,+function+()+{+})
++++);
}|code-block|syntax|javascript|381465|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

this is what I do

<pre><code>function loadJsFile(filename) {
 $.ajaxSetup({
 cache: true
 });

 var dloadJs = new $.Deferred();
 $.when(dloadJs).done(function () {
 $.ajaxSetup({
 cache: false
 });
 });

 dloadJs.resolve(
 $.getScript(filename, function () { })
 );
}
</code></pre>

blocks|key|381525|text|@Felix+Kling的回答是一个很好的开始。然而，如果我想要“功能化”它，我发现在.getScripts()返回结果的末尾，整体附加的.done()有一个小问题。您需要来自循环内的链式.getScript()迭代的最后承诺。以下是他的解决方案的修改版本(谢谢，BTW)。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|381526|插件：|381527|(function+($)+{
++++var+fetched+=+new+function+()+{
++++++++++++this.scripts+=+[];
++++++++++++this.set+=+[];

++++++++++++this.exists+=+function+(url)+{
++++++++++++++++var+exists+=+false;

++++++++++++++++$.each(this.set,+function+(index,+value)+{
++++++++++++++++++++if+((url+%7C%7C+'')+===+value)+{
++++++++++++++++++++++++exists+=+true;

++++++++++++++++++++++++return+false;
++++++++++++++++++++}
++++++++++++++++});

++++++++++++++++return+exists;
++++++++++++};

++++++++++++this.buildScriptList+=+function+()+{
++++++++++++++++var+that+=+this;

++++++++++++++++that.set+=+[];

++++++++++++++++$('script').each(function+()+{
++++++++++++++++++++var+src+=+$(this).attr('src')+%7C%7C+false;

++++++++++++++++++++if+(src)+{
++++++++++++++++++++++++that.set.push(src);
++++++++++++++++++++}
++++++++++++++++});

++++++++++++++++$.merge(this.set,+this.scripts);

++++++++++++++++return+this;
++++++++++++};
++++++++},
++++++++getScript+=+$.getScript;

++++$.getScript+=+function+()+{
++++++++var+url+=+arguments[0]+%7C%7C+'';

++++++++if+(fetched.buildScriptList().exists(url))+{
++++++++++++return+$.Deferred().resolve();
++++++++}

++++++++return+getScript
++++++++++++.apply($,+arguments)
++++++++++++.done(function+()+{
++++++++++++++++fetched.scripts.push(url);
++++++++++++});
++++};

++++$.extend({
++++++++getScripts:+function+(urls,+cache)+{
++++++++++++if+(typeof+urls+===+'undefined')+{
++++++++++++++++throw+new+Error('Invalid+URL(s)+given.');
++++++++++++}

++++++++++++var+deferred+=+$.Deferred(),
++++++++++++++++promise+=+deferred.promise(),
++++++++++++++++last+=+$.Deferred().resolve();

++++++++++++if+(!$.isArray(urls))+{
++++++++++++++++urls+=+[urls];
++++++++++++}

++++++++++++$.each(urls,+function+(index)+{
++++++++++++++++promise+=+promise.then(function+()+{
++++++++++++++++++++last+=+$.getScript(urls[index]);

++++++++++++++++++++return+last;
++++++++++++++++});
++++++++++++});

++++++++++++if+(Boolean(cache+%7C%7C+false)+&&+!Boolean($.ajaxSetup().cache+%7C%7C+false))+{
++++++++++++++++$.ajaxSetup({cache:+true});

++++++++++++++++promise.done(function+()+{
++++++++++++++++++++$.ajaxSetup({cache:+false});
++++++++++++++++});
++++++++++++}

++++++++++++deferred.resolve();

++++++++++++return+last;
++++++++}
++++});
})($);|code-block|syntax|javascript|381528|您可以忽略获取的函数(我实现它是为了减少潜在的冗余调用--这就是我劫持.getScript()的原因)，并查看变量last在.getScripts()方法中设置在哪里。它缺省为已解析的延迟对象，因此如果urls数组为空，则会将其传递给要附加外部.done()调用的返回结果。否则，它将不可避免地从链接的.getScript()调用中分配最后一个promise对象，从而确保函数外部的所有内容保持同步。|381529|如果您在将最初创建的延迟对象返回给调用者之前对其进行解析，那么返回它将不起作用(这是每个jQuery's+official+documentation应该做的事情)。|381530|示例：|381531|function+loadStuff(data)+{
++++var+version+=+{
++++++++'accounting':+'1.2.3',
++++++++'vue':+'1.2.3',
++++++++'vueChart':+'1.2.3'
++++};

++++$.getScripts([
++++++++'https://cdnjs.cloudflare.com/ajax/libs/accounting.js/'+%2B+version.accounting+%2B+'/accounting.min.js',
++++++++'https://cdnjs.cloudflare.com/ajax/libs/vue/'+%2B+version.vue+%2B+'/vue.min.js',
++++++++'https://cdnjs.cloudflare.com/ajax/libs/vue-chartjs/'+%2B+version.vueChart+%2B+'/vue-chartjs.min.js'
++++],+true)
++++++++.done(function+()+{
++++++++++++//+do+stuff
++++++++})
++++++++.fail(function+()+{
++++++++++++throw+new+Error('There+was+a+problem+loading+dependencies.');
++++++++});
}|381532|entityMap|0|LINK|mutability|MUTABLE|url|https://api.jquery.com/deferred.resolve/^0|17|D|1X|7|2M|C|0|0|0|Z|C|1L|4|1Q|D|3E|7|47|C|0|18|V|0|0|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@$9|13|A|14|B|C]|$9|15|A|16|B|C]|$9|17|A|18|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|19|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|1A|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|1B|8|@$9|1C|A|1D|B|C]|$9|1E|A|1F|B|C]|$9|1G|A|1H|B|C]|$9|1I|A|1J|B|C]|$9|1K|A|1L|B|C]]|D|@]|E|$]]|$1|O|3|P|5|6|7|1M|8|@]|D|@$9|1N|A|1O|1|1P]]|E|$]]|$1|Q|3|R|5|6|7|1Q|8|@]|D|@]|E|$]]|$1|S|3|T|5|J|7|1R|8|@]|D|@]|E|$K|L]]|$1|U|3|-4|5|6|7|1S|8|@]|D|@]|E|$]]]|V|$W|$5|X|Y|Z|E|$10|11]]]]

@Felix Kling's answer was a great start. However, I discovered that there was a slight issue with the overall attached <code>.done()</code> at the end of the <code>.getScripts()</code> returned result if I wanted to "functionalize" it. You need the last promise from the chained <code>.getScript()</code> iterations from within the loop. Here's the modified version of his solution (thank you, BTW).

<h2>Plugin:</h2>

<pre><code>(function ($) {
 var fetched = new function () {
 this.scripts = [];
 this.set = [];

 this.exists = function (url) {
 var exists = false;

 $.each(this.set, function (index, value) {
 if ((url || '') === value) {
 exists = true;

 return false;
 }
 });

 return exists;
 };

 this.buildScriptList = function () {
 var that = this;

 that.set = [];

 $('script').each(function () {
 var src = $(this).attr('src') || false;

 if (src) {
 that.set.push(src);
 }
 });

 $.merge(this.set, this.scripts);

 return this;
 };
 },
 getScript = $.getScript;

 $.getScript = function () {
 var url = arguments[0] || '';

 if (fetched.buildScriptList().exists(url)) {
 return $.Deferred().resolve();
 }

 return getScript
 .apply($, arguments)
 .done(function () {
 fetched.scripts.push(url);
 });
 };

 $.extend({
 getScripts: function (urls, cache) {
 if (typeof urls === 'undefined') {
 throw new Error('Invalid URL(s) given.');
 }

 var deferred = $.Deferred(),
 promise = deferred.promise(),
 last = $.Deferred().resolve();

 if (!$.isArray(urls)) {
 urls = [urls];
 }

 $.each(urls, function (index) {
 promise = promise.then(function () {
 last = $.getScript(urls[index]);

 return last;
 });
 });

 if (Boolean(cache || false) &amp;&amp; !Boolean($.ajaxSetup().cache || false)) {
 $.ajaxSetup({cache: true});

 promise.done(function () {
 $.ajaxSetup({cache: false});
 });
 }

 deferred.resolve();

 return last;
 }
 });
})($);
</code></pre>

You can ignore the fetched function (I implemented it to reduce potential redundant calls - which is why I hijacked <code>.getScript()</code>) and see where the variable <code>last</code> is set inside the <code>.getScripts()</code> method. It defaults to a resolved deferred object, so that if the urls array is empty, it's passed to the returned result to attach the outer <code>.done()</code> call to. Otherwise, it will inevitably be assigned the last promise object from the chained <code>.getScript()</code> calls and thus will ensure everything will remain synchronous from outside the function.

Returning the initially created deferred object will not work if you resolve it before returning it back to the invoker (which is what you're supposed to do per <a href="https://api.jquery.com/deferred.resolve/" rel="nofollow noreferrer">jQuery's official documentation</a>).

<h2>Example:</h2>

<pre><code>function loadStuff(data) {
 var version = {
 'accounting': '1.2.3',
 'vue': '1.2.3',
 'vueChart': '1.2.3'
 };

 $.getScripts([
 'https://cdnjs.cloudflare.com/ajax/libs/accounting.js/' + version.accounting + '/accounting.min.js',
 'https://cdnjs.cloudflare.com/ajax/libs/vue/' + version.vue + '/vue.min.js',
 'https://cdnjs.cloudflare.com/ajax/libs/vue-chartjs/' + version.vueChart + '/vue-chartjs.min.js'
 ], true)
 .done(function () {
 // do stuff
 })
 .fail(function () {
 throw new Error('There was a problem loading dependencies.');
 });
}
</code></pre>

I'm writing an engine that requires the use of getScript quite extensively. I've pushed it into its own function, for ease of use, but now I need to make sure that the function itself is synchronous. Unfortunately, I can't seem to make getScript wait until the script it loads is actually finished loading before proceeding. I've even tried setting jQuery's ajax asynch property to false before making the call. I'm thinking of using jQuery's when/done protocol, but I can't seem to wrap my head around the logic of placing it inside a function and making the function itself synchronous. Any help would be very much appreciated!

<pre><code>function loadScript(script){
//Unrelated stuff here!!!
$.when(
$.getScript(script,function(){
 //Unrelated stuff here!!!
})).done(function(){
 //Wait until done, then finish function
});
}
</code></pre>

Loop code (by request):

<pre><code>for (var i in divlist){
 switch($("#"+divlist[i]).css({"background-color"})){
 case #FFF:
 loadScript(scriptlist[0],divlist[i]);
 break;
 case #000:
 loadScript(scriptlist[2],divlist[i]);
 break;
 case #333:
 loadScript(scriptlist[3],divlist[i]);
 break;
 case #777:
 loadScript(scriptlist[4],divlist[i]);
 break;
 }
}
</code></pre>

Using getScript synchronously

jQuery

我正在编写一个需要广泛使用getScript的引擎。为了便于使用，我已经将它放入了自己的函数中，但现在我需要确保函数本身是同步的。不幸的是，我似乎不能让getScript等到它加载的脚本实际加载完成后再继续。在进行调用之前，我甚至尝试将jQuery的ajax asynch属性设置为false。我正在考虑使用jQuery...

问同步使用getScript
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问同步使用getScriptEN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问同步使用getScript
EN