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 正在异步运行，这就是为什么我之后无法获取变量的原因。如何确保 setEmailLogs() 在我运行 getEmailLogs() 之前已经运行。

Answer 1

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

从 jQuery 1.5 开始，由 $.ajax() 返回的 jqXHR 对象实现了 Promise 接口，为它们提供了 Promise 的所有属性、方法和行为（请参阅延迟对象了解更多信息）。

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

将您的代码修改为使用 Promise 接口的内容。基本上$.ajax() 会返回给你它将被执行的承诺。然后，您可以在满足承诺后链接下一个方法来执行。你经常会看到像这样链接多个 Promise 的模式（在伪代码中）：

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

这样你就可以写出相当干净的异步代码，而不会有大量的回调相互调用。

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

我修改了你的 sn-p 以使用承诺：

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);