Question

需要JS等待直到ajax完成（即ajax成功函数执行），但是Ajax在调用函数完成后正在执行。添加了回调，但无济于事。将日志语句插入代码中以记录顺序。当前，顺序为：

1：11毫秒
2：3毫秒
3：10毫秒
5：32毫秒
7：13毫秒
4：23ms
6：5毫秒

需要以数字顺序“ 1到7”执行。

HTML ：

<script>
    $(document).ready(function(){
        $('#btn').click(function() {
            console.log('1');
            callAjaxfunc();
            console.log('7');
        });
    });
</script>

<button id="btn">Call Ajax!</button>
<div id="log"></div>
<div id="info"></div>

JS ：

function callAjaxfunc() {
    console.log('2');
    callingAjaxfunc(function() {
        console.log('6');
    });
}

function callingAjaxfunc(callback) {
    console.log('3');   
    $.ajax({
        url: 'https://api.joind.in/v2.1/talks/10889',
        data: {
        format: 'json'
        },
        error: function() {
            $('#info').html('<p>An error has occurred</p>');
        },
        dataType: 'jsonp',
        success: function(data) {
            var $title = $('<h1>').text(data.talks[0].talk_title);
            var $description = 
            $('<p>').text(data.talks[0].talk_description);
            console.log('4');
            callback();
            $('#info')
                .append($title)
                .append($description);
        },
        type: 'GET'
    });

    console.log('5'); 
}

Answer 1

有两种方法可以控制顺序代码。首先，了解您正在使用异步函数后，可以将代码序列放入成功回调中。

HTML

<script>
  $(document).ready(function(){
    $('#btn').click(function() {
      console.log('1');
      callAjaxfunc(function() {
        console.log('7');
      });

    });
  });
</script>

<button id="btn">Call Ajax!</button>
<div id="log"></div>
<div id="info"></div>

JS

function callAjaxfunc(callback) {
  console.log('2');
  callingAjaxfunc(function() {
    console.log('5'); 
    console.log('6');
    callback();
  });
}

function callingAjaxfunc(callback) {
  console.log('3');   
    $.ajax({
      url: 'https://api.joind.in/v2.1/talks/10889',
      data: {
       format: 'json'
      },
      error: function() {
        $('#info').html('<p>An error has occurred</p>');
      },
      dataType: 'jsonp',
      success: function(data) {
        var $title = $('<h1>').text(data.talks[0].talk_title);
        var $description = 
        $('<p>').text(data.talks[0].talk_description);
        console.log('4');
        callback();
        $('#info')
            .append($title)
            .append($description);
      },
      type: 'GET'
   });
}

我只是按顺序排列了您的代码，但这不是一个好习惯。所以不要这样做。您必须了解您正在使用异步代码，因此接受异步方法会更好。

我鼓励您了解有关Promises（异步/等待）或Generators的更多信息。这可能是使您更好地实现异步代码最佳实践的好方法。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise https://jakearchibald.com/2017/async-iterators-and-generators/

调用函数完成后执行AJAX

1 个答案: