javascript - ajax运行后调用闭包函数

Question

我对 javascript 中的模块模式和闭包不熟悉。我正在尝试创建一个获取 JSON 数据的模块，以便我可以将其显示在我的网页上。

var EmailLogs = (function(){

    var emailLogs = [];
    var config = {};

    function init(options){
        for(var prop in options) {
            if(options.hasOwnProperty(prop)){
                config[prop] = options[prop];
            }
        }

        setEmailLogs();
    }

    function setEmailLogs(){
        $.ajax({
            type: "POST",
            headers : { "cache-control": "no-cache" },
            url: "../../ajax/adminGetEmailLogs.php",
            data: {options: JSON.stringify(config)},
            dataType: 'json',
            success: function(values){
                if(values.success)
                {
                    emailLogs = values.emailLogs;
                }
            }
        });
    }

    function getEmailLogs(){
        return emailLogs;
    }

    return{
        init: init,
        getEmailLogs: getEmailLogs,
    }

})();

var options = {
        sData : [
            'email_id'
        ],
        filters : {
            user_id : 44860,
        }
    }

EmailLogs.init(options);
console.log(EmailLogs.getEmailLogs());

我试图在运行 init 时运行 ajax 调用。然后我希望显示 emailLogs 变量。我想是因为我的ajax正在异步运行，这就是为什么我之后无法获取变量的原因。在运行 getEmailLogs() 之前，如何确保 setEmailLogs() 已运行。

Answer 1

$.ajax() 实现 Promise 接口(interface)并返回一个 Deferred 对象 see the jQuery docs

The jqXHR objects returned by $.ajax() as of jQuery 1.5 implement the Promise interface, giving them all the properties, methods, and behavior of a Promise (see Deferred object for more information).

这意味着您可以使用 Promise 接口(interface)来确保在 $.ajax() 完成后运行所需的方法。

将您的代码修改为使用 Promise 接口(interface)的代码。基本上 $.ajax() 返回给您它将被执行的 promise 。一旦 promise 得到满足，您就可以链接下一个方法来执行。您经常会看到像这样链接多个 Promise 的模式(在伪代码中):

doAjaxRequest()
  .then(doSomethingElse)
  .then(doAnotherSomethingElse)

这样您就可以编写非常干净的异步代码，而不是有大量相互调用的回调。

The documentation for Q promises有一些很好的例子来解释 Promise 的工作方式。

我修改了您的代码片段以使用 promise :

var EmailLogs = (function(){

    var emailLogs = [];
    var config = {};

    function init(options){
        for(var prop in options) {
            if(options.hasOwnProperty(prop)){
                config[prop] = options[prop];
            }
        }

        setEmailLogs().done(function(values) {
                if(values.success)
                {
                    console.log(values.emailLogs)
                }
            });
    }

    function setEmailLogs(){
        return $.ajax({
            type: "POST",
            headers : { "cache-control": "no-cache" },
            url: "../../ajax/adminGetEmailLogs.php",
            data: {options: JSON.stringify(config)},
            dataType: 'json'
        });
    }

    return{
        init: init,
        getEmailLogs: getEmailLogs,
    }

})();

var options = {
        sData : [
            'email_id'
        ],
        filters : {
            user_id : 44860,
        }
    }

EmailLogs.init(options);