Javascript 如何将.when（）与包含ajax调用的函数一起使用？

我见过

.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!'))
}

$（函数（）{
$（'.document'）。on（'click'，'.ajax'，ajaxFunction）；
});
函数ajaxFunction（e）{
e、 预防默认值（）；
//ajax请求
$.ajax({
async:true，
cache:false，
键入：“post”，
url:“/echo/html/”，
数据：{
html:“这是以html格式响应的，
”，
延误：1
},
数据类型：“html”，
beforeSend:function（）{
log（'在请求之前被激发'）；
},
成功：功能（数据）{
log（“请求成功时激发”）；
$（'.document'）。追加（数据）；
},
完成：函数（）{
log（'请求完成时激发'）；
}
});
log（'helloworld！'）；
}
函数微分函数（d）{
$.when（ajaxFunction（e））.then（警报（'hi mom！'））
}

我的目标是在

ajaxFunction

函数的内容完成时，即完成ajax和“hello world！”时触发警报（“hi mom！”）已登录到控制台。然而，警报从未出现

据我所知，问题在于容器函数实际上没有返回承诺，因此

.then（）

部分永远不会触发。当所有内部代码（包括ajax）都完成时，如何修改此代码以返回承诺

我更愿意继续使用

.when（）

/

.then（）

模式，而不是在

ajaxFunction

中手动包含回调

---

上面这个例子的一个小例子是

您可以返回一个承诺

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

        // ajax request
     return $.ajax({       // return promise  
            async: true,
            cache: false,
            type: 'post',
            url: '/echo/html/',

---

你可以回报一个承诺

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

        // ajax request
     return $.ajax({       // return promise  
            async: true,
            cache: false,
            type: 'post',
            url: '/echo/html/',

---

有几件事。就像@pXL说的，你需要回报承诺。在小提琴中，还需要将（d）参数从微分函数传递到ajax函数。终于换了你的衣服。然后呢 to.done（函数（a）{}）

---

有几件事。就像@pXL说的，你需要回报承诺。在小提琴中，还需要将（d）参数从微分函数传递到ajax函数。终于换了你的衣服。然后呢 to.done（函数（a）{}）

---

我发现我可以通过为整个函数创建一个延迟事件，为我想要捕获的非ajax行为创建一个延迟事件，在非ajax内容完成后解析第二个延迟事件，然后使用

$.when（）

捕获ajax调用返回的延迟对象何时解析，以及我为非ajax内容创建的延迟对象何时完成，然后使用

.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!')})
}

$（函数（）{
$（'.document'）。on（'click'，'.ajax'，deferedfunction）；
});
函数ajaxFunction（e）{
e、 预防默认值（）；
//ajax请求
var ajaxDeferred=$.ajax({
async:true，
cache:false，
键入：“post”，
url:“/echo/html/”，
数据：{
html:“这是以html格式响应的，
”，
延误：1
},
数据类型：“html”，
beforeSend:function（）{
console.log（'在请求之前激发'）
},
成功：功能（数据）{
log（“请求成功时激发”）；
$（'.document'）。追加（数据）；
},
完成：函数（）{
log（'请求完成时激发'）；
}
})
var newDeferred=$.Deferred（）
var timeoutDeferred=$.Deferred（）
setTimeout（函数（）{
log（'helloworld！'）
timeoutDeferred.resolve（）
}, 2000)
$.when（timeoutDeferred，ajaxDeferred）.then（function（）{
newDeferred.resolve（）
}
);
延期归还；
}
函数微分函数（e）{
$.when（ajaxFunction（e））.done（function（）{alert（'all done！'））}
}

我发现我可以通过为整个函数创建一个延迟事件，为我想要捕获的非ajax行为创建一个延迟事件，在非ajax内容完成后解析第二个延迟事件，然后使用

$.when（）

捕获ajax调用返回的延迟对象何时解析，以及我为非ajax内容创建的延迟对象何时完成，然后使用

.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!')})
}

$（函数（）{
$（'.document'）。on（'click'，'.ajax'，deferedfunction）；
});
函数ajaxFunction（e）{
e、 预防默认值（）；
//ajax请求
var ajaxDeferred=$.ajax({
async:true，
cache:false，
键入：“post”，
url:“/echo/html/”，
数据：{
html:“这是以html格式响应的，
”，
延误：1
},
数据类型：“html”，
beforeSend:function（）{
console.log（'在请求之前激发'）
},
成功：功能（数据）{
log（“请求成功时激发”）；
$（'.document'）。追加（数据）；
},
完成：函数（）{
log（'请求完成时激发'）；
}
})
变量n