jQuery 动态拉取函数调用完成时

Question

我有以下代码：

现场-code.js

.....

var ajaxContentFunc = $(origin).data("modal-content-handler");

$.when(window[ajaxContentFunc]()).done(function (resp) {
    kModal.showContent(resp);
});

在另一个文件中我有以下标签和函数

<a href="#" data-modal-content-handler="ajaxContentGeneration">Click Me</a>

.....

function ajaxContentGeneration() {

    var aProm = $.ajax({

        url: "tests/ajax/AjaxTest.aspx",
        data: { exampleType: "modal-ajax" },
        dataType: "html"


    });


    aProm.done(function (data) {

        console.log("Ajax Loaded!");
        var content = $(data).find("#ajax-content");

        return aProm;

    });


}

我需要将 ajaxContentGeneration（无论可能是什么方法）的结果填充到要发送到 showContent 的变量中，换句话说：

1) 从标签的 modal-content-handler 数据属性中提取 ajaxContentFunction 名称

2) 调用函数（在本例中为 ajaxContentGeneration）

3) 等待函数的 ajax 完成并 return 生成数据（在本例中 html）

4) 完成后将该值传递给 kModal.showContent(----这里----);

但是目前我得到：

1) 正确提取 ajaxContentFunctionName

2) 调用函数（ajaxContentGeneration() 函数）

3) 调用 kModal.showContent(未定义)。这被过早调用，因为延迟没有正确等待函数调用完成（在 ajax 完成后）。

4) Ajax 完成

我哪里搞砸了？

Answer 1

据我所知，你已经完成了 95%。

使用 .then() 代替 .done() 和 return return 由 $.ajax().then() 编写的承诺：

function ajaxContentGeneration() {
    return $.ajax({
        url: "tests/ajax/AjaxTest.aspx",
        data: { exampleType: "modal-ajax" },
        dataType: "html"
    }).then(function (data) {
        return $(data).find("#ajax-content"); // this will return jQuery
        // return $(data).find("#ajax-content").html(); // this will return html
    });
}

您或许还可以从顶级调用中清除 $.when() :

var ajaxContentFunc = $(origin).data("modal-content-handler");
window[ajaxContentFunc]().then(function (resp) {
    // `resp` is whatever was returned by the `return $(data).find()...` statement above
    kModal.showContent(resp);
});

我说 "probably" 的原因是如果可以调用 value-returning（而不是 promise-returning）函数而不是调用 $.when() ajaxContentGeneration().

Answer 2

另一种方法是：

// should really be renamed...
function ajaxContentGeneration(){
    return $.ajax({
        url      : "tests/ajax/AjaxTest.aspx",
        data     : { exampleType: "modal-ajax" },
        dataType : "html"
    })
}

其他地方：

var ajaxContentFunc = $(origin).data("modal-content-handler");

window[ajaxContentFunc]()
    .done(function(RES){
        kModal.showContent( $(RES).find("#ajax-content") );
    });

因此 ajaxContentGeneration 函数的功能将是 return 一个 AJAX 承诺，而不是在其中进行操作，而是在需要的地方进行操作（从响应中获取 #ajax-content 元素)

请注意，这整件事都是糟糕的 JS 设计实践，您应该避免在 window 对象之上使用函数，而是在另一个对象上。

jQuery 动态拉取函数调用完成时

jQuery When Done on dynamically pulled function call

javascript

ajax

jquery

promise

jquery-deferred

其他地方：