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

Question

У меня есть код, в котором в основном я создал функцию, в которой с помощью jQuery ajax я получаю значение и устанавливаю его как атрибут данных элемента.

затем после вызоваЯ сохраняю значение данных в переменной.

Но проблема в том, что я не хочу выполнять какой-либо код до завершения функции ajax.

JS

function load_data(){
    $.ajax({
       .....,
       success: function (response) {
           $('.element').attr('data-foo', 'bar')
       }
    })
}

load_data(); //let the function set data first
console.log($('.element').data('foo')) //then execute this line

Как этого добиться?

Answer 1

Вы можете использовать, Async-Await .https://javascript.info/async-await

async function load_data(){
    await $.ajax({
       .....,
       success: function (response) {
           $('.element').attr('data-foo', 'bar')
       }
    });
    console.log($('.element').data('foo')) //then execute this line
}
load_data(); //let the function set data first

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

function load_data(callback){
    $.ajax({
       .....,
       success: function (response) {
           $('.element').attr('data-foo', 'bar');
           callback();
       }
    })
}

function doItLater(){
    console.log($('.element').data('foo')) //then execute this line
}

load_data(doItLater); //let the function set data first

Вы можете передать данные в качестве параметра doItLater для получения данных в вашей текущей области.

Answer 2

Вы можете получить функцию обратного вызова в load_data и выполнить ее в функции success. Примерно так:

function load_data(callback){
    $.ajax({
       .....,
       success: function (response) {
           $('.element').attr('data-foo', 'bar');
           callback();
       }
    })
}

load_data(function() {
  console.log($('.element').data('foo'));
});

Конечно, если это ваш реальный сценарий, вы можете просто поместить console.log($('.element').data('foo')); непосредственно в функцию success.

Answer 3

Вы можете просто поместить консольный журнал в коллбэк успеха после того, как вы установите атрибут элемента.

Если вы не хотите, чтобы консольный журнал записывался в load_data (возможно, вы хотите сделать load_data многоразовым, без консольного журнала), вы можете поместить консольный журнал в функцию обратного вызова, передать обратный вызов в load_data и вызвать его в функция успеха ajax:

function load_data(cb){
    $.ajax({
       .....,
       success: function (response) {
           $('.element').attr('data-foo', 'bar')
           cb();
       }
    })
}

function callback() {
  console.log($('.element').data('foo'))
}

load_data(callback);

Другой вариант - установить async: false в объекте настроек ajax, что предотвратит выполнение следующего кода до разрешения функции ajax, но обычно это не рекомендуется.

Answer 4

Это невозможно сделать напрямую из-за асинхронного вызова AJAX.

Есть два способа достичь желаемого

1.

• Создание функции / с для кода, который вы хотите выполнить после успешного запроса ajax

• Вызов этой функции / с из блока успеха ajax

Например.

function load_data(){
    $.ajax({
       .....,
       success: function (response) {
           $('.element').attr('data-foo', 'bar');
           console.log($('.element').data('foo')); // Your code goes here
       }
    })
}

2

• Возврат $.ajax в load_data функции
• И использование .then или .done функция для самого load_data

Например.

function load_data(){
    return $.ajax({
       .....,
           success: function (response) {
               $('.element').attr('data-foo', 'bar')
           }
        })
}

load_data().done(function() {
  console.log($('.element').data('foo')); // Your code goes here
});

Однако .done и .then ведут себя не одинаково.В частности, если стандартный обратный вызов обещания возвращает другое обещание, это задержит разрешение всех последующих обещаний.Тогда jQuery ведет себя так, но не делает.Для завершенного обратного вызова невозможно отложить разрешение последующих обратных вызовов.

Answer 5

Ajax является асинхронным. Итак, вы должны прислушиваться к успеху события и делать свое дело. Вы можете достичь чего-то похожего на ваши потребности, используя await / async

https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Statements/async_function

const load_data = async () => {
    return await fetch('https://exmaple.com');
}

load_data();

$('.element').attr('data-foo', 'bar')

Answer 6

попробуйте использовать .done ()

load_data()
   .done(function(dataResponse){
           console.log($('.element').data('foo')) //then execute this line
   }); //let the function set data first

код внутри будет выполняться после ответа на ваш вызов ajax и dataResponse получит от вас ответ на вызов ajax