Not update css on chrome when Ajax

Question

I need to show a bar progress with several ajax requests. They should not be asynchronous because each request depends on the previous one. Everything works fine, except the progress bar. Which does not work for me in Chrome. In Firefox it works perfect. Performing several tests I realized that chrome definitely does not update any property of the html when there are several requests without async.

I have this test code:

$('#run').click(function(){
  color_text();
});

function color_text(){

    console.log("Coloring...");

    sleep();
    console.log('Load 1');
    $('#text').html('Test 1');

    sleep();
    console.log('Load 2');
    $('#text').html('Test 2');

    sleep();
    console.log('Load 3');
    $('#text').html('Test 3');

}



function sleep() {
  $.ajax({
      url: '/echo/html/',
      async: false,
      data: {
          html: "<p>Text echoed back to request</p>",
          delay: 3
      },
      method: 'post',
      update: 'target'
  }).done( function( data ){
        result = data;
         $('#text').html('Test Loaded');
    })
}

<html>
<head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    </head>
  <body>
   <button id="run">
     <h2>Run</h2>
   </button>
   <hr>
   
<div id="text"> Test</div>

</body>
</html>

In this link you notice more than not update https://jsfiddle.net/arturoverbel/bgm4pa10/10/

Nest the onprogresss then in the inner most one add up the eventObj.loadeds. developer.mozilla.org/en-US/docs/Web/API/… — StackSlave
– StackSlave, Commented Jun 19, 2018 at 21:50
They should not be asynchronous They most certainly should, and in fact most browsers will block this in the future, unless used in a webworker. — Keith
– Keith, Commented Jun 19, 2018 at 21:51
I get it. But weird that this method does not work in Chrome anyway. — Arturo Verbel De León
– Arturo Verbel De León, Commented Jun 19, 2018 at 21:52
Ok. I have to work async while answering this question. You are right, it is better to work with the recommended @Keith — Arturo Verbel De León
– Arturo Verbel De León, Commented Jun 19, 2018 at 22:03

Jonathan Dumaine · Accepted Answer · 2018-06-19 22:08:14Z

Synchronous requests are bad. They block the main javascript thread and will make your app freeze and they are deprecated:

Note: Starting with Gecko 30.0 (Firefox 30.0 / Thunderbird 30.0 / SeaMonkey 2.27), Blink 39.0, and Edge 13, synchronous requests on the main thread have been deprecated due to the negative effects to the user experience.

You should be noticing this in your app. Notice how the whole page freezes when you hit "run" in your JSFiddle too.

However, you can still achieve exactly what you want asynchronously with promises.

The key feature of a promise is that you can return another promise and it will continue the chain. Add a little recursiveness and you've got yourself a nice solution that doesn't freeze your whole page.

Using your example:

$('#run').click(function() {
    color_text();
});

function color_text() {

    console.log("Coloring...");

    run();

}

function run(count = 0) {

    // make a request. consider using `fetch()` 
    return makeRequest().then(result => {

        // if we're not done, 
        // return `run()` again which runs this
        // whole promise again
        if (result != 'done!') {
            // optionally update your html
            $('#text').html(count);
            return run(count + 1);
        }

        $('#text').html(result);
    });

}

https://jsfiddle.net/je2m0pxa/

That works in Chrome. Thank you very much. Although better I will work async.

Collectives™ on Stack Overflow

Not update css on chrome when Ajax

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related