同步使用getScript

Question

我正在编写一个需要相当广泛地使用getScript的引擎。为了便于使用，我将它推入自己的函数中，但现在我需要确保函数本身是同步的。不幸的是，我似乎无法让getScript等待，直到它加载的脚本在继续之前实际上完成加载。我甚至尝试在调用之前将jQuery的ajax asynch属性设置为false。我正在考虑使用jQuery的when/done协议，但似乎无法围绕将它放入函数并使函数本身同步的逻辑。任何帮助将非常感谢！

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

循环代码（按要求）：

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; 
    } 
} 

Answer 1

正如我所说，将Ajax调用与承诺对象链接起来相对比较容易。现在，它没有看到为什么脚本必须一个接一个地加载，但你会有一个理由。

首先，虽然我会摆脱switch声明，如果你只是用不同的参数调用相同的函数。例如。通过简单地返回从传递给.then^[docs]回调的另一个承诺

var scripts = { 
    '#FFF': '...', 
    '#000': '...' 
    // etc. 
}; 

您可以链的承诺：你可以把所有的脚本网址的映射。所有你需要做的是开始一个承诺或延期对象：

var deferred = new $.Deferred(); 
var promise = deferred.promise(); 

for (var i in divlist) { 
    // we need an immediately invoked function expression to capture 
    // the current value of the iteration 
    (function($element) { 
     // chaining the promises, 
     // by assigning the new promise to the variable 
     // and returning a promise from the callback 
     promise = promise.then(function() { 
      return loadScript(
       scripts[$element.css("background-color")], 
       $element 
      ); 
     }); 
    }($('#' + divlist[i]))); 
} 

promise.done(function() { 
    // optional: Do something after all scripts have been loaded 
}); 

// Resolve the deferred object and trigger the callbacks 
deferred.resolve(); 

在loadScript，你简单地返回的承诺从$.getScript返回或通过.done返回的一个：

function loadScript(script_url, $element){ 
    // Unrelated stuff here!!! 

    return $.getScript(script_url).done(function(){ 
     // Unrelated stuff here 
     // do something with $element after the script loaded. 
    }); 
} 

该脚本将所有按循环中的访问顺序调用。请注意，如果divlist是一个数组，您确实应该使用普通的for循环而不是for...in循环。

Answer 2

只需创建一个脚本节点，它的SRC属性设置为JS要加载然后将其附加到头部：

var myScript = document.createElement('script'); 
myScript.src = "thesource.js"; 
document.head.appendChild(myScript); 

Answer 3

试试这种方法，用延迟对象创建数组，并使用$ .when和“apply”

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 
}); 

Answer 4

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); 
}; 

Answer 5

这对我有效，并可能帮助你。

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

基本上，我只是绕开速记符号，并在async: false

Answer 6

添加你知道$.getScriptaccepts是剧本后同步调用回调函数加载？

实施例：

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

我有2级以上的解决方案：一个pure js一个，一个用于multiple js load。

Answer 7

这是我做的

function loadJsFile(filename) { 
    $.ajaxSetup({ 
     cache: true 
    }); 

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

    dloadJs.resolve(
     $.getScript(filename, function() { }) 
    ); 
}