Есть ли способ ждать ответа AJAX и прекратить выполнение?

Ответ 1

Все вызовы Ajax могут выполняться либо асинхронно (с функцией обратного вызова, это будет функция, указанная после ключа "success" ), либо синхронно - эффективно блокирует и ожидает ответа серверов. Чтобы получить синхронное выполнение, вы должны указать

async: false 

как описано здесь

Обратите внимание, однако, что в большинстве случаев асинхронное выполнение (через обратный вызов при успешном завершении) просто отлично.

Ответ 2

Простым ответом является отключение async. Но это неправильно. Правильный ответ - переосмыслить, как вы пишете остальную часть вашего кода.

Вместо того, чтобы писать это:

function functABC(){
    $.ajax({
        url: 'myPage.php',
        data: {id: id},
        success: function(data) {
            return data;
        }
    });
}

function foo () {
    var response = functABC();
    some_result = bar(response);
    // and other stuff and
    return some_result;
}

Вы должны написать это следующим образом:

function functABC(callback){
    $.ajax({
        url: 'myPage.php',
        data: {id: id},
        success: callback
    });
}

function foo (callback) {
    functABC(function(data){
        var response = data;
        some_result = bar(response);
        // and other stuff and
        callback(some_result);
    })
}

То есть вместо того, чтобы возвращать результат, передайте код того, что должно быть сделано как обратные вызовы. Как я показал, обратные вызовы могут быть вложены на столько уровней, сколько у вас есть вызовы функций.

Быстрое объяснение того, почему я говорю, что неправильно отключить асинхронный вызов:

Отключение асинхронизации приведет к зависанию браузера во время ожидания вызова ajax. Пользователь не может нажимать ни на что, не может прокручивать и в худшем случае, если пользователь неактивен в памяти, иногда, когда пользователь перетаскивает окно с экрана и затягивает его снова, он будет видеть пустые места, потому что браузер заморожен и не может перерисовывать. Для однопоточных браузеров, таких как IE7, это еще хуже: все сайты замораживаются! Пользователи, которые испытывают это, могут подумать, что ваш сайт неисправен. Если вы действительно не хотите делать это асинхронно, просто выполните свою обработку в конце и обновите всю страницу. Это, по крайней мере, не будет ошибкой.

Ответ 3

Если вы можете использовать promises, вы также можете использовать цепочку обещаний.

function functABC() {
  return new Promise(function(resolve, reject) {
    $.ajax({
      url: 'myPage.php',
      data: {id: id},
      success: function(data) {
        resolve(data) // Resolve promise and go to then()
      },
      error: function(err) {
        reject(err) // Reject the promise and go to catch()
      }
    })
  }
}

functABC().then(function(data) {
  // Run this when your request was successful
  console.log(data)
}).catch(function(err) {
  // Run this when promise was rejected via reject()
  console.log(err)
})

Ответ 4

Метод 1:

function functABC(){
    $.ajax({
        url: 'myPage.php',
        data: {id: id},
        success: function(data) {
            return data;
        },
        complete: function(){
              // do the job here
         }
    });
}

var response = functABC();

Метод 2

function functABC(){
    $.ajax({
        url: 'myPage.php',
        data: {id: id},
        async: false,
        success: function(data) {
            return data;
        }        
    });

   // do the job here
}

Ответ 5

используйте атрибут async:false вместе с URL и данными. это поможет немедленно выполнить вызов ajax, и вы сможете получать и использовать данные с сервера.

function functABC(){
    $.ajax({
        url: 'myPage.php',
        data: {id: id},
        async:false
        success: function(data) {
            return data;
        }
    });
}

Ответ 6

Нет необходимости ждать ответа Ajax. Вы можете загрузить свои данные в главном разделе вашего приложения:

function functABC(){
    $.ajax({
        url: 'myPage.php',
        data: {id: id},
        success: function(data) {
            sessionStorage.setItem('mydata', data);
        }
    });
} 

Затем, когда событие window.load запущено, ваши данные будут доступны:

alert(sessionStorage.getItem('mydata'));