javascript - jQuery When Done 动态拉取函数调用

Question

我有以下代码:

在 site-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完成并返回生成的数据(在本例中为html)

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

但是目前我得到:

1)正确拉取ajaxContentFunctionName

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

3)调用kModal.showContent(未定义)。这是过早调用的，因为 deferred 没有正确等待函数调用完成(在 ajax 完成之后)。

4) Ajax 完成

我哪里搞砸了？

Answer 1

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

使用 .then() 而不是 .done() 并返回 $.ajax().then() 返回的 Promise :

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

我说“可能”的原因是，如果可以调用返回值(而不是 promise 返回)函数而不是 ajaxContentGeneration()<，则需要 $.when()/.