关于javascript：JQuery在启动另一个函数之前等待任何函数完成 – ajax，动画和音频


JQuery wait for any function to finish before starting another- ajax, animations and Audio

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

Ajax调用，动画和播放音频

我知道这些问题：
上一个功能完成后调用一个函数

等到所有jQuery Ajax请求都完成了？

如何使jQuery在返回之前等待Ajax调用完成？

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

1
2
3
4
5
6
7
8
9
10
11
12
    $.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
     })
    })
});

这些是动画：

1
2
3
4
5
6
        $("#success_div").delay(1000).show(1000);
    $("#success_div").delay(500).hide(500);
    $("#success_div").fadeOut('slow', function() {
        //something else

    });

这对于音频：

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

}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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;

            }


    });

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

1
2
3
4
5
6
7
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()

非常感谢！

相关讨论

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

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

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

1
2
3
4
5
6
7
8
9
10
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：

1
2
3
4
5
6
7
8
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并行链接：

例如顺序：

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

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

例如平行：

1
   $.when(ajax_load_file(file_1), play_success_animation(), play_transition_audio("audio_path1","general"));
相关讨论

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

1
2
3
4
5
6
var ajax = $.ajax({});
$.when(ajax).done(function(data) {

}).then(function(){

});

我们可以通过三种方式实现此演示

相关讨论

您可以使用.when

1
2
3
4
5
6
7
8
9
10
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函数在这里你可以阅读更多关于它的信息。

相关讨论