同步使用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({
    async: false,
    url: "jui/js/jquery-ui-1.8.20.min.js",
    dataType: "script"
});

基本上,我只是绕过了速记符号并加入了 async: false

Answer 2

正如我所说,使用promise对象链接Ajax调用相对容易.现在,它不知道为什么脚本必须一个接一个地加载,但你有理由这样做.

首先,switch如果你只是用不同的参数调用相同的函数,我会删除该语句.例如,您可以将所有脚本URL放在地图中:

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

您可以通过简单地从传递给.then ^[docs]的回调中返回另一个promise来链接promise .您需要做的就是从promise或deferred对象开始:

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 3

你知道吗？$.getScript 接受加载脚本后同步调用的回调函数？

例:

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

我还有2个解决方案:一个纯js 一个,一个用于多个js加载.