javascript - 函数中的回调似乎未在Require.JS中执行

This question already has answers here:

How do I return the response from an asynchronous call?
                                
                                    （38个答案）
                                
                        
                                6年前关闭。
            
                    
我在RequireJS中有一个模块：


  define（['jquery'，'jsonLoader']，function（$，jsonLoader）{

function buildMenu()
{
    jsonLoader('system/models/build/menu.json', function(data){
        var output='';
        // ...
        return output;
    });

}

return {
    buildMenu : buildMenu
}
 })

执行buildMenu()函数后，它将返回“ undefined”（因为在jsonLoader()中定义的回调不会执行）。我在这里调用该函数：


  define（[[“ jquery”，“ core”，“ template”，“ jsonLoader”，“ debugger”]，
  函数（$，核心，模板，jsonLoader）{

var config,
    debug;

$(function() {
    jsonLoader('system/config.json',function(data){
        config = data;
        init();
    });
});

function init()
{
    debug = new $.fn.debug;

    if(config.application.debug == true)
        debug.enabled = true

    // Build menu
    debug.log("Building Menu...");
    console.log ( template.buildMenu() );
}
 });

并且jsonLoader看起来是：


  define（[[“ jquery”]，function（$）{

 return function(name, callback){
           $.get(name, function(data){
              callback(data);
           });
  };

  
  }）;


哪里有错？

最佳答案

define(['jquery', 'jsonLoader'], function($, jsonLoader){

    function buildMenu(callback)
    {
        jsonLoader('system/models/build/menu.json', function(data){
            var output='';
            // ...
            callback(output);
        });

    }

    return {
        buildMenu : buildMenu
    }
});

在哪里叫它

define(["jquery", "core", "template", "jsonLoader", "debugger"], function($, core, template, jsonLoader) {

    ...

    function init()
    {
        ...
        template.buildMenu(function(output) { console.log(output); } );
    }
});

承诺简介

现在，如果您进一步嵌套所有这些回调内容，它们可能会失控。使用jQuery Deferred，它看起来像这样：

define(['jquery', 'jsonLoader'], function($, jsonLoader){

    function buildMenu()
    {
        var d = $.Deferred();
        jsonLoader('system/models/build/menu.json', function(data){
            var output='';
            // ...
            d.resolve(output);
        });
        return d.promise();
    }

    return {
        buildMenu : buildMenu
    }
});

define(["jquery", "core", "template", "jsonLoader", "debugger"], function($, core, template, jsonLoader) {

    var config,
        debug;

    $(function() {
        jsonLoader('system/config.json').success(function(data){
            config = data;
            init();
        });
    });

    function init()
    {
        debug = new $.fn.debug;

        if(config.application.debug == true)
            debug.enabled = true

        // Build menu
        debug.log("Building Menu...");
        console.log ( template.buildMenu().success(function(output){console.log(output);}) );
    }
});

define(["jquery"],function($){

    return function(name){
        var d = $.Deferred();
        $.get(name, function(data){
            d.resolve(data);
        });
        return d.promise();
    };
});