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仅提供成功），或与{{1}并行}：

e.g。依序：

when

您可以指定函数名称，如果它不接受参数并返回一个承诺，或者使用ajax_load_file(file_1).done(play_success_animation) .then(function(){ return play_transition_audio("audio_path1", "general"); }); / done中的匿名函数。

e.g。平行：

then

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/

第二个解决方案是向你的函数添加promises并在第一个函数完成后运行next函数Here你可以阅读更多关于它的信息。

Answer 3

$。什么时候就像AND条件。如果任何一个进程失败，它没有得到回调

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

}).then(function(){

});

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

JQuery在启动另一个函数之前等待任何函数完成 - ajax，动画和音频

3 个答案: