Javascript: Wait for Loading screen in the JavaScript function only appears when I debug, or pauses the script

Question

I'm having a problem, where the Wait for Loading screen in the JavaScript function only appears when I debug, or pauses the script. If I try to execute directly, it does not appear at all.

$('#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;
        }
    }
}

What is the "wait for loading screen"? Where specifically in your code is there a problem happening? What is the purpose of these `sleep()` calls? — David, Oct 14 '17 at 13:50
Aggh `sleep` that's not what you want in JavaScript. Fine for other programming languages, but not JS. — Mouser, Oct 14 '17 at 14:04

score 0 · Answer 1 · answered Oct 14 '17 at 14:11

The big problem here is that you treat JavaScript as completely synchronous while get requests aren't. So you make a few get requests using jQuery and put JavaScript to sleep until it has loaded the get request. However waiting 10 seconds probably is enough to finish all the code and hide the loading screen.

Throw away the sleep function and build the update function (showprogress) with the correct way of getting results from jQuery's get.

Example from their documentation

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

More on asynchronous:

Easy to understand definition of "asynchronous event"?

score 0 · Answer 2 · answered Oct 16 '17 at 16:19

With the tip above, I solved the problem as follows:

    $('#btnPesquisar').click(function () {
        $.when(
            $.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')


                    //console.log('Passo 2')
                    ProcessVendas(result)

                    //console.log('Sleep')
                    sleep(1000);


                }
            }).then(showProgress())).done(function () { hideProgress() })



    });

Javascript: Wait for Loading screen in the JavaScript function only appears when I debug, or pauses the script

2 Answers2