循环后的 JavaScript 回调

Question

我刚刚创建了一个新的 Wordpress 博客，并且已经开始构建 JavaScript 基础!

我遇到的问题是我有一个循环多个变量并包含所需的 JS 库的函数，我需要做的是在循环完成时执行回调!

这是我的代码!

var Utilities = {
    Log : function(item)
    {
        if(console && typeof console.log == 'function')
        {
            //Chrome
            console.log(item);
        }
    },
    LoadLibraries : function(callback)
    {
        $.each(Wordpress.required,function(i,val){
            //Load the JS
            $.getScript(Wordpress.theme_root + '/js/plugins/' + val + '/' + val + '.js',function(){ //  %/js/plugins/%/%.js
                Utilities.Log('library Loaded: ' + val);
            });
        });
        callback();
    }
}

用法就是这样!

Utilities.LoadLibraries(function(){
    Utilities.Log('All loaded');
});

在上面你可以看到callback()的执行是在文件进入dom之前执行的!我需要在每个库包含的末尾调用这个!

Answer 1

$.getScript() 是一个异步调用，因此您的 JavaScript 代码将继续执行，直到该调用完成。正如您所知，$.getScript() 还接受回调函数作为 success 参数，该函数将在异步调用完成时执行。您必须围绕该参数制定解决方案，可能是从数组中删除脚本，然后检查该数组是否为空。

    $.each(Wordpress.required,function(i,val){
        //Load the JS
        $.getScript(Wordpress.theme_root + '/js/plugins/' + val + '/' + val + '.js',function(){ //  %/js/plugins/%/%.js
            Utilities.Log('library Loaded: ' + val);

            // Remove the completed item
            delete WordPress.required[i];

            // If array is empty, all scripts loaded - execute callback!
            if (!Wordpress.required.length)
                callback();              
        });
    });