如何在等待服务器完成处理时暂停代码执行？

Question

我知道这个问题已经问了很多次了，但是我在Stack Overflow上找到的所有解决方案都不起作用。因此，基本上，我有一个带有按钮的表，用于将字段切换为“开”或“关”。我通过jQuery .ajax（）方法通过PUT请求执行此操作，并在成功调用后刷新表。但是，大多数时候，该表不是最新的，直到我再次手动刷新该表。

这是我的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，但是它不起作用。