javascript – 当所有脚本通过$.getScript加载完成时调用处理程序

所以我们假设我们通过$.getScript加载一堆脚本：

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

现在,我想在所有这些脚本完成加载时调用一个处理程序.我尝试为全局ajaxStop event绑定一个处理程序.根据the docs,如果没有更多的Ajax请求被处理,则会触发ajaxStop全局事件.

@H_404_5@$( document ).ajaxStop( handler );

但它不起作用(不调用处理程序).

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

我怎样才能做到这一点？

解决方法:

你反正做错了:)

这是可能发生的事情之一：
想象一下脚本是否被缓存,然后它们可能会立即被加载.
所以,直接在第一次调用$.getScript(‘js / script1.js’)之后;脚本将可用并且$.ajaxStop(可能!!!)被调用,在最坏的情况下会发生三次.

为了间接回答你的问题,我会提出一个不同的解决方案,完全避免这种竞争条件.
你可以在这里试试：http://jsfiddle.net/etGPc/8/

@H_404_5@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循环没有什么不同:)

这里的另一个优点是,如果您同时进行其他ajax请求,则此方法不会混淆.

附：为了避免命名冲突,你可以将整个事物包装在一个自动执行的函数中,即

@H_404_5@function(){
    var urls, log, loaded; 

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

更新：重新编写代码…

@H_404_5@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/