jquery 插件 - 使 ajax 调用可链接答案

【问题标题】：jquery plugin - make ajax call chainablejquery 插件 - 使 ajax 调用可链接
【发布时间】：2015-07-25 20:48:39
【问题描述】：

我正在尝试编写一个 jquery 插件。

现在，我想在这个插件的一个功能中使用 ajax 调用。

但是它应该是可链接的，这意味着在这种情况下应该执行 ajax 调用，并且只有在返回某些内容之后才会发生返回。

我尝试了不同的方法，但到目前为止我无法做到，以便在检索到 ajax 调用的返回值后真正执行链中的第二个函数；

在这个版本中（见下文）我可以使用

$(document).createDatabase().message();

所以，链接有效。但是查看控制台日志——message() 函数是在 createDatabase() 中的 ajax 调用完成之前执行的。

我怎样才能做到这一点

$(document).createDatabase().message();

首先返回 createDatabase() 中的 ajax 调用的输出/返回，并且仅在执行该 message() 之后？

代码：

(function($) {

    $.fn.createDatabase = function(options) {

        // Plugin options defaults
        var settings = $.extend({
            name: 'NA',
            onExit: function() {} // callback function
        }, options);

        $.ajax({
                method: "POST",
                url: "plugin/php/createDatabase.php",
                data: settings
        })
        .done(function(msg) {
             console.log("createDatabase executed with message: " + msg);
             settings.onExit.call();    
        });

      return this;

   };



   $.fn.message = function() {

       console.log('this should appear after the console-log message of createDatabase');
       return this;
   }

}(jQuery));

谢谢！

【问题讨论】：

return this 将在 ajax 完成之前很久发生，message() 也将同步触发。您是否尝试使用自己的消息插件或第三方插件？
是的——这正是问题所在。我试图将return this 放入ajax 调用的.done 函数中。但这似乎不起作用，因为this 指的是不同的东西，对吧？ message只是插件的第二个功能。
应该阅读并理解：stackoverflow.com/questions/14220321/…。你不能做你想做的事。与 ajax 相关的任何事情都需要在回调中处理或作为 ajax 的承诺
不太清楚为什么你想要messag() 的链式方法。但是，您可以在第一个插件的回调选项中使用它
与其说是message()，不如说是createDatabase()——我想让它成为可链接的，因为它应该创建一些数据库条目，我需要确保在移动之前创建这些条目on - 因此能够将其链接起来会很棒。

标签： javascript jquery ajax plugins chaining

【解决方案1】：

你可以做几件事，但它们都是一个坏主意。原因是它们是两个独立的 jQuery 插件——一个插件应该能够独立工作。没有人不会做.message().createDatabase() 的保证或理由。如果您需要保证执行顺序，那么您应该只使用一个插件。一种可能的方法是在调用.createDatabase(options) 时将message 传递到options 中，然后在调用完成时运行message。像这样

$(document).createDatabase({
    message: function() {...}
});
...
var promise = $.ajax({
            method: "POST",
            url: "plugin/php/createDatabase.php",
            data: settings
    })
    .done(function(msg) {
         console.log("createDatabase executed with message: " + msg);
         settings.onExit.call();    
    });
...
if ( settings.message )
    promise.done( settings.message.bind(this) );

我尝试了不同的方法，但到目前为止我无法做到，以便在检索到 ajax 调用的返回值后真正执行链中的第二个函数；

第二个函数在第一个函数完成时执行。第一个以return this 结束，但这发生在ajax 调用完成之前，因为ajax 调用是异步的。

【讨论】：