JQuery 等待任何功能完成，然后再开始另一个 - ajax、动画和音频

Question

我的代码中有几行需要以正确的顺序运行。这些行包括：

Ajax 调用、动画和播放音频

我知道这些问题： Call a function after previous function is complete

Wait until all jQuery Ajax requests are done?

How do I make jQuery wait for an Ajax call to finish before it returns?

我只需要一种可以添加到函数定义中的方法，以便在完成任何其他操作之前先完成该函数。我的主要问题是这个 function1.done(function2) 或回调结构，因为我有很多这样的，所以我想控制这些行的执行顺序，只是用它们在代码中的顺序。有没有办法做到这一点？

    $.get(lang1_txt_path, function(data) {
    src_txt = data;
}, 'text').done(function() {
    $.get(lang2_txt_path, function(data) {
        trg_txt = data;
    }, 'text').done(function() {
        $.get(lang2_os_txt_path, function(data) {
            trg_txt_os = data;
        }, 'text').done(function() { //something
     })
    })
});

这些是动画：

        $("#success_div").delay(1000).show(1000);
    $("#success_div").delay(500).hide(500);
    $("#success_div").fadeOut('slow', function() {
        //something else

    });

这是音频：

function play_audio(audio_path,audio_type){
audio = document.getElementById("audio_"+audio_type);audio.src =audio_path;audio.play();

}

play_audio(audio_path1,'general')


played_2nd_file=false;
$("#audio_player").bind("ended", function(){
        if (played_2nd_file==false){
            audio_path2="audio/"+lang2+'.'+trg_audio2
            play_audio(audio_path2,'general')
            console.log(audio_path2)
            played_2nd_file=true;

            }


    });

因此，您可以看到，让每一个都等到前一个完成是很麻烦的。也许有一些关于如何组织它们和包含回调的良好编程实践，但它是如此复杂，因为代码变化非常快，所以唯一的方法是确保函数在它们内部以相同的顺序实现代码，以便将其包含在每个函数的定义中。理想情况下，我想要这样的东西：

ajax_load_file(file_path1)
ajax_load_file(file_path2)
ajax_load_file(file_path3)
play_success_animation()
play_success_audio()
play_transition_audio()
play_transition animation()

非常感谢！

Answer 1

大多数 Ajax 操作都会返回一个 Promise，因此您可以返回它们：

function ajax_load_file(file){
    return $.ajax(...);
}

动画在他们的队列中提供了一个承诺，所以

function play_success_animation()
{
    $("#success_div").delay(1000).show(1000);
    $("#success_div").delay(500).hide(500);
    $("#success_div").fadeOut('slow', function() {
        //something else

    });
    return $("#success_div").promise();
}

音频提供结束事件，但需要根据需要连接/断开，所以使用on和off：

function play_transition_audio(path, type){
    var def = $.Deferred();
    play_audio(path,type);
    $("#audio_player").off("ended").on("ended", function(){
       def.resolve(path);
    });
    return def.promise();
}

然后依次与then 或done 链接（then 允许成功和失败回调，done 仅提供成功），或与when 并行：

例如顺序：

   ajax_load_file(file_1).done(play_success_animation)
       .then(function(){
           return play_transition_audio("audio_path1", "general");
       });

您可以指定函数名称，如果它不带参数并返回一个承诺，或者在done/then 中使用匿名函数。

例如并行：

   $.when(ajax_load_file(file_1), play_success_animation(), play_transition_audio("audio_path1", "general"));

Answer 2

你可以使用.when

var d1 = $.Deferred();
var d2 = $.Deferred();

$.when( d1, d2 ).done(function ( v1, v2 ) {
    console.log( v1 ); // "Fish"
    console.log( v2 ); // "Pizza"
});

d1.resolve( "Fish" );
d2.resolve( "Pizza" );

https://api.jquery.com/jquery.when/

第二种解决方案是在你的函数中添加承诺，并在第一个函数完成时运行下一个函数Here你可以阅读更多信息。

Answer 3

$.when 类似于 AND 条件。如果任何一个进程失败，它不会得到回调

var ajax = $.ajax({});
$.when(ajax).done(function(data) {

}).then(function(){

});

我们可以通过三种方式实现这一目标Demo