0

我已经看到.when()并.then()直接在 jquery 中使用 .ajax 调用来延迟回调函数的执行，直到 ajax 完成。我遇到的问题是对本身不是 ajax 调用但包含 ajax 函数的函数执行相同的操作。我有以下代码块：

$(function() {

    $('.document').on('click', '.ajax', ajaxFunction);

});

function ajaxFunction(e) {
        e.preventDefault();

        // ajax request
        $.ajax({
            async: true,
            cache: false,
            type: 'post',
            url: '/echo/html/',
            data: {
                html: '<p>This is echoed the response in HTML format</p>',
                delay: 1
            },
            dataType: 'html',
            beforeSend: function() {
                console.log('Fired prior to the request');
            },
            success: function(data) {
                console.log('Fired when the request is successfull');
                $('.document').append(data);
            },
            complete: function() {
                console.log('Fired when the request is complete');
            }


        });

        console.log('hello world!');
    }

function defferedFunction(d){
    $.when(ajaxFunction(e)).then(alert('hi mom!'))
}

我的目标是在ajaxFunction函数的内容完成时触发警报（“嗨，妈妈！”），即当 ajax 完成和“hello world！”时 已经登录到控制台。但是，警报永远不会出现。

据我所知，问题在于容器函数实际上并没有返回一个承诺，因此该.then()部分永远不会触发。当所有内部代码（包括 ajax）完成后，如何修改此代码以返回承诺？

我宁愿继续使用.when()/.then()模式，而不是手动在ajaxFunction.

上面的例子的一个小提琴是here。

4

3 回答 3

3

你可以回报一个承诺

function ajaxFunction(e) {
        e.preventDefault();

        // ajax request
     return $.ajax({       // return promise  
            async: true,
            cache: false,
            type: 'post',
            url: '/echo/html/',
于 2013-06-25T19:20:12.093 回答
1

有几件事。就像@pXL 所说，您需要返回承诺。同样在您的小提琴中，您需要将 (d) 参数从您的 deferedFunction 传递给您的 ajaxFunction。最后将您的 .then 更改为 .done(function(a){});

http://jsfiddle.net/mq4Sj/5/

$(function() {

    $('.document').on('click', '.ajax', defferedFunction);

});

 function defferedFunction(e){
        $.when(ajaxFunction(e)).done(function(d){
        alert(d); // ->> response from server.
 })
    }
于 2013-06-25T19:34:27.263 回答
0

我发现我可以通过为整个函数创建一个延迟事件，为我想要捕获的非 ajax 行为创建一个延迟事件，在非 ajax 内容完成后解决第二个延迟事件，然后使用a$.when()捕获 ajax 调用返回的延迟对象何时被解析，以及我为非 ajax 内容创建的延迟对象何时完成，然后使用 a.then()来解析整个函数的延迟对象。

它看起来像这样，全部放在一起：

$(function() {

    $('.document').on('click', '.ajax', defferedFunction);

});

function ajaxFunction(e) {
        e.preventDefault();

        // ajax request
        var ajaxDeferred = $.ajax({
            async: true,
            cache: false,
            type: 'post',
            url: '/echo/html/',
            data: {
                html: '<p>This is echoed the response in HTML format</p>',
                delay: 1
            },
            dataType: 'html',
            beforeSend: function() {
                console.log('Fired prior to the request')

            },
            success: function(data) {
                console.log('Fired when the request is successfull');
                $('.document').append(data);
            },
            complete: function() {
                console.log('Fired when the request is complete');
            }
        })

        var newDeferred = $.Deferred()

        var timeoutDeferred = $.Deferred()

        setTimeout(function(){
            console.log('hello world!')
            timeoutDeferred.resolve()
        }, 2000)

        $.when(timeoutDeferred, ajaxDeferred).then(function(){
            newDeferred.resolve()
        }
        );


        return newDeferred;
    }

function defferedFunction(e){
    $.when(ajaxFunction(e)).done(function(){alert('all done!')})
}
于 2013-06-25T20:34:33.040 回答