Javascript 在前一个功能完成后启动该功能

我有三个职能：

function atualizarPublicacoes(){
  
  $.ajax({
  url: "{{ path('publicacoes') }}",
  type: 'post',
  dataType: 'json',
  success: function(publicacao){
    $.each(publicacao, function(key, value){
      $('#mural').append('<div class="border border-light post card my-3"><div id="cabecalho'+value['id']+'" class="px-4 card-header d-flex align-items-center justify-content-between"><div class="d-flex align-items-center"><img class="rounded-circle avatar" style="height:55px ; width:55px" alt="image" src="'+value['userAvatar']+'"></img><div class="mx-3"><div class="text-sm">'+value['userNomeSobrenome']+'<small class="text-muted d-block">'+moment(value['data']).fromNow()+'</small></div></div></div></div><div class="card-body">'+value['post']+'</div><div class="card-footer px-4" style="background-color: #B7BBE0"><div id="acoes'+value['id']+'"></div><div></div></div><div class="card-footer" style="background-color: #CACDE7"><ul class="list-unstyled" id="comentarios'+value['id']+'"></ul></div>');

      if(value['titulo']){
        $('#cabecalho'+value['id']).append('<h3 class="mb-0" style="font-family: Nunito Sans, sans-serif">'+value['titulo']+'</h3>');
      }
      if(value['userId'] == "{{app.user.id}}"){
        $('#cabecalho'+value['id']).append('<div><button id="editar'+value['id']+'" class="btn btn-gradient-info btn-sm" data-toggle="tooltip" data-placement="top" title="Editar"><i class="mdi mdi-lead-pencil"></i></button><button id="deletar'+value['id']+'" class="ml-2 btn btn-gradient-danger btn-sm" data-toggle="tooltip" data-placement="top" title="Excluir"><i class="mdi mdi-delete-forever"></i></button></div>');
      }
      });

    }
  });
};

当我加载页面时，第一个页面会执行，但我认为它会在其他两个页面完成后完成，因为它加载了更多的内容（需要更多的时间），所以就像最后两个页面没有执行一样，因为它们使用前一个函数的元素来工作

第一个（AtualizarComentarios）完成后，如何启动第二个（AtualizarComentarios），第三个（AtualizarComentarios）在第二个（AtualizarComentarios）完成后启动

我也在其他事件中调用它们，所以我不能将它们全部放在一个函数中

---

谢谢

jqueryajax方法返回与promise兼容的对象，因此您可以使用它。例如，将第一个函数更改为以下内容--关键是使用

then

而不是

success

，并返回

then

调用的结果：

function atualizarPublicacoes(){
  return $.ajax({
//^^^^^^
    url: "{{ path('publicacoes') }}",
    type: 'post',
    dataType: 'json'
  }).then(function(publicacao){
//  ^^^^^^
    $.each(publicacao, function(key, value){
      // ... etc ...
    });
  });
};

对其他两个函数执行相同的操作

在调用代码中，chain

then

调用或（更简单）使用

async

/

wait

语法：

$(document).ready(async function(){
//                ^^^^^
  moment.locale('pt-BR');
  await atualizarPublicacoes();
//^^^^^
  await atualizarComentarios();
  await atualizarCurtidas();
  
  Notiflix.Notify.Init({
    position: 'center-top'
  });
  Notiflix.Confirm.Init({
    titleColor: '#ff5549',
    okButtonBackground: '#ff5549'
  });
});

$(document).ready(function(){

  moment.locale('pt-BR');
  atualizarPublicacoes();
  atualizarComentarios();
  atualizarCurtidas();
  Notiflix.Notify.Init({
    position: 'center-top'
  });
  Notiflix.Confirm.Init({
    titleColor: '#ff5549',
    okButtonBackground: '#ff5549'
  });

});

function atualizarPublicacoes(){
  return $.ajax({
//^^^^^^
    url: "{{ path('publicacoes') }}",
    type: 'post',
    dataType: 'json'
  }).then(function(publicacao){
//  ^^^^^^
    $.each(publicacao, function(key, value){
      // ... etc ...
    });
  });
};

$(document).ready(async function(){
//                ^^^^^
  moment.locale('pt-BR');
  await atualizarPublicacoes();
//^^^^^
  await atualizarComentarios();
  await atualizarCurtidas();
  
  Notiflix.Notify.Init({
    position: 'center-top'
  });
  Notiflix.Confirm.Init({
    titleColor: '#ff5549',
    okButtonBackground: '#ff5549'
  });
});