Кнопка jQuery не меняет свой класс мгновенно из-за вызова AJAX

Question

Когда нажимается моя кнопка, я хочу немедленно изменить ее класс, но кажется, что вызов ajax не позволяет этому произойти. Это происходит через 3-4 секунды. Почему? Я протестировал с предупреждениями, и все в порядке .

кнопка:

    $('#myButton').click(function() {
        alert("ok");//it will alert instantly
        $('#myButton').removeClass().addClass("btn btn-success"); //here, this code is running after 3-4 secs
    });

ajax звонок:

 $('button').click(function() {
     ...some code...
     $.ajax({
            async: false,
            type: 'POST',
            dataType: 'json',
            url: myUrl,
            data: myValue,
            success: function(data) {
                setTimeout(function() { 
                    img.src = img.src;
                }, 10);
            }

        })

}

Без ajax звонка работает

Answer 1

Удалите это:

async: false

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

Никогда не используйте async: false. Сохраняйте асинхронные операции асинхронными.