Javascript:JavaScript 函数中的等待加载屏幕仅在我调试或暂停脚本时出现

Question

我遇到了一个问题，JavaScript 函数中的等待加载屏幕仅在我调试或暂停脚本时出现。如果我尝试直接执行，它根本不会出现。

$('#btnPesquisar').click(function () {
    $.ajax({
        method: 'GET',
        url: '<%= ResolveUrl("LiberarBoleto.aspx/onSearch") %>',
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        data: { pv: JSON.stringify($('#txtVenda').val()), imob: JSON.stringify($('#drpDownImob').val()) },
        success: function (result) {
            console.log('Passo 1')
            showProgress();
            console.log ('Sleep')
            sleep(10000);

            ProcessVendas(result);
            sleep(10000);
            console.log('Passo 2')
            hideProgress();
            console.log('Passo 3')
        }
    });
});

function showProgress() {
    var updateProgress = $get("<%= UpdateProgress1.ClientID %>");
    sleep(10000);
    updateProgress.style.display = "block";
    sleep(10000);
    console.log('Exibição da Tela Aguarde Carregando Concluida')
    //updateProgress.style.display = "none";  

};

function hideProgress() {
    var updateProgress = $get("<%= UpdateProgress1.ClientID %>");
    updateProgress.style.display = "none";
}

function sleep(milliseconds) {
    var start = new Date().getTime();
    for (var i = 0; i < 1e7; i++) {
        if ((new Date().getTime() - start) > milliseconds) {
            break;
        }
    }
}

Answer 1

这里的大问题是，您将 JavaScript 视为完全同步，而 get 请求则不是。因此，您使用 jQuery 发出一些 get 请求，并使 JavaScript 进入休眠状态，直到它加载了 get 请求。然而，等待 10 秒可能足以完成所有代码并隐藏加载屏幕。

抛弃 sleep 函数并使用从 jQuery 的 get 获取结果的正确方法构建更新函数 (showprogress)。

文档中的示例

$.get( "test.cgi", { name: "John", time: "2pm" } )
  .done(function( data ) {
     alert( "Data Loaded: " + data );
 });

有关异步的更多信息:

Easy to understand definition of "asynchronous event"?