Как остановить выполнение кода во время ожидания завершения обработки сервером?

Question

Я знаю, что этот вопрос задавался много раз, но ни одно из решений, которое я нашел в Stack Overflow, не работает. Итак, в основном, у меня есть таблица с кнопкой, чтобы переключить поле на «вкл» или «выкл». Я делаю это с помощью запроса PUT через метод jQuery .ajax () и после успешного вызова обновляю таблицу. Однако большую часть времени таблица не обновляется, пока я не обновлю таблицу вручную.

Итак, это мой код JavaScript:

$(document).ready(function() {
    function reloadTable(){
        $.ajax({
            url: "localhost/switch-list", 
            type: "GET",
            success: function(data){
                data.forEach(function(element) {
                    /** 
                    Populate table with switch data and 
                    dynamically generate toggle button.
                    **/
                });
            }
        });
    }

    $(".toggle-switch-state").click(function(){

        var oldState = $(this).data('switch-state');
        var switchID = $(this).data('switch-id');

        if (oldState=="on") {
            newState = "off";
        }
        else{
            newState = "on";
        }

        $.ajax({
            url: "localhost/switch-list/"+switch_id,
            type: "PUT",
            beforeSend: function(request) {
                request.setRequestHeader("switch_state", newState);
            },
            success: function(html){
                $("#switch-list-table").html("");
                reloadTable();
            }
        });
    });
});

Я сказал " большую часть времени ", потому что когда-нибудь, когда таблица перезагружается, она будет показывать последнее значение (то есть значение после переключения). Итак, я предполагаю, что это какая-то проблема с выбором времени. То есть код javascript не ожидает, пока сервер завершит свою обработку, прежде чем выполнить блок success. Это еще раз доказано, потому что это работает, когда я добавляю таймаут в свой блок success:

$(".toggle-switch-state").click(function(){
    $.ajax({
        url: "localhost/switch-list/"+switch_id,
        type: "PUT",
        beforeSend: function(request) {
            request.setRequestHeader("switch_state", newState);
        },
        success: function(){
            $("#switch-list-table").html("");
            setTimeout(reloadTable, 1000);
        }
    });
});

Я пытался async:false, но он не работает.