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

时间:2016-07-07 22:57:11

标签: javascript jquery ajax promise jquery-deferred

我有以下代码:

在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)从标签的模态内容处理程序数据属性中提取 ajaxContentFunction 名称

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

3)等待函数的ajax完成并返回生成的数据(在本例中为html)

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

但目前我正在接受:

1)正确拉出ajaxContentFunctionName

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

3)调用kModal.showContent(undefined)。这是过早调用的,因为延迟不能正确等待函数调用完成(在ajax完成之后)。

4)Ajax完成

我在哪里乱搞?

2 个答案:

答案 0 :(得分:1)

据我所知,你有95%。

使用.then()代替.done()并返回$.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);
});

我说的原因&#34;可能&#34;如果可以调用返回值(而不是承诺返回)函数而不是$.when(),那么ajaxContentGeneration()是必要的。

答案 1 :(得分:1)

另一种方法是:

// 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函数的功能将是返回一个AJAX承诺,而不是在其中进行操作,而是在需要时进行操作(从中获取#ajax-content元素响应

请注意,整个事情都是不好的JS设计,你应该避免在window对象之上使用函数,而是在另一个对象上。