调用处理函数，当所有的脚本，通过$ .getScript装载完毕 [英] Invoking handler when all scripts finished loading via $.getScript

问题描述

所以我们可以说，我们通过 $加载了一堆剧本getScript加入：

So let's say we load a bunch of scripts via $.getScript:

$.getScript( 'js/script1.js' );
$.getScript( 'js/script2.js' );
$.getScript( 'js/script3.js' );

现在，我想调用处理函数，当所有的脚本加载完成。我想结合的处理程序全球 ajaxStop 事件。据的文档，在 ajaxStop 全球性事件如果没有更多的Ajax请求被处理触发。

Now, I'd like to invoke a handler when all those scripts finished loading. I tried binding a handler for the global ajaxStop event. According to the docs, the ajaxStop global event is triggered if there are no more Ajax requests being processed.

$( document ).ajaxStop( handler );

，但它不工作（处理程序不调用）。

but it doesn't work (the handler is not invoked).

现场演示： http://jsfiddle.net/etGPc/2/

我怎样才能做到这一点？

How can I achieve this?

推荐答案

你就错了反正:)

下面是可能发生的事情之一： 想象中的脚本被缓存，那么他们可能会在任何时间加载。 所以，第一个电话后直奔 $ getScript加入脚本（'JS / script1.js'）; 脚本将提供$ .ajaxStop（威力！）被调用，在该会发生三次最坏情况。

here is one of the things that can happen: imagine the scripts are cached, then they might be loaded in no time. so, straight after the first call $.getScript( 'js/script1.js' ); the script will be available and $.ajaxStop (might!!!) get called, in the worst case that would happen three times.

要回答你的问题，间接地，我会提出不同的解决方案，避免了这种竞争状态产品总数。 你可以尝试在这里： http://jsfiddle.net/etGPc/8/

to answer your question indirectly i would propose a different solution which avoids this race condition alltogether. you can try it here: http://jsfiddle.net/etGPc/8/

var urls, log, loaded;

// urls to load
urls = [
    'https://raw.github.com/h5bp/html5-boilerplate/master/js/script.js',
    'https://raw.github.com/h5bp/html5-boilerplate/master/js/plugins.js',
    'https://raw.github.com/h5bp/html5-boilerplate/master/js/libs/modernizr-2.0.6.min.js'
];

// urls loaded 
loaded = []; 


log = $( '#log' ); 

$.map( urls, function( url ){
    $.getScript( url, function(){
        // append to loaded urls
        loaded.push( url ); 
        log.append( "loaded " + url + "<br>" ); 

        // all loaded now? 
        if( loaded.length == urls.length ){
            log.append( "<b>all done!</b>" ); 
        }
    } ); 
} ); 

如果你还没有看到 jQuery.map 前：它不是一个真正不同于for循环:)

if you haven't seen jQuery.map before: it's not really different from a for-loop :)

这里的另一个优点是，这种方法并不感到困惑，如果您有其他的Ajax请求的同时继续。

another advantage here is that this method doesn't get confused if you have other ajax requests going on at the same time.

P.S。为避免命名-冲突，你可以包装在一个自执行的函数的整个事情，即

p.s. to avoid naming-clashes you can wrap the entire thing in a self-executing function, i.e.

function(){
    var urls, log, loaded; 

    ... all code here ... 
} (); 

---

更新：重构了codeA位...

---

Update: Refactored the code a bit...

var urls, loadedUrls, log;

urls = [
    'https://raw.github.com/h5bp/html5-boilerplate/master/js/script.js',
    'https://raw.github.com/h5bp/html5-boilerplate/master/js/plugins.js',
    'https://raw.github.com/h5bp/html5-boilerplate/master/js/libs/modernizr-2.0.6.min.js'
];    

loadedUrls = [];

log = $( '#log' )[0];

urls.forEach(function ( url ) {
    $.getScript( url, function () {
        loadedUrls.push( url );

        $( log ).append( 'loaded ' + url + '<br>' );

        if( loadedUrls.length === urls.length ){
            $( log ).append( '<b>all done!</b>' );
        }
    });
});

现场演示： http://jsfiddle.net/etGPc/10/

这篇关于调用处理函数，当所有的脚本，通过$ .getScript装载完毕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！