AJAX выполняется после завершения вызова функции - PullRequest
Новая
       29

AJAX выполняется после завершения вызова функции

0 голосов
/ 29 ноября 2018

Нужно, чтобы JS ожидал завершения ajax (т.е. выполняется функция успеха ajax), но Ajax выполняется после завершения вызывающей функции.Добавил обратный звонок, но не помогло.Лог-операторы вставляются в код для записи заказа.В настоящее время заказ составляет:

  • 1: 11мс
  • 2: 3мс
  • 3: 10мс
  • 5: 32мс
  • 7: 13мс
  • 4: 23мс
  • 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'); 
}

1 Ответ

0 голосов
/ 30 ноября 2018

Существует 2 способа контролировать код последовательности.Во-первых, понимая, что вы работаете с асинхронной функцией, вы можете поместить последовательность кода в обратный вызов успеха.

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'
   });
}

Я просто разместил ваш код в последовательности, но это не очень хорошая практика.Так что не делай этого.Вы должны понимать, что работаете с асинхронным кодом, поэтому лучше принять асинхронный способ.

Я призываю вас узнать больше об обещаниях (асинхронных / ожидающих) или генераторах.Это может быть хорошим способом улучшить рекомендации по асинхронному коду.

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

...