如何在Backbone中使JQuery进度栏显示多个Ajax调用的进度？

Question

Edit:

I can't even get a simple setup working with backbone js such that in the controller

initialize: function() {

    // alert("1"); 
    $( "#progressbar" ).html("0%");
    // alert("2");

    $.ajax({
      dataType:"json", 
      async:true,
      url:"http://localhost:8888/chathau5/rest/tasks/list",
      success: function(data, response) {

      }
    });


    // alert("3");
    $( "#progressbar" ).html("25%");
            // it works when i put the alerts in...

},

any ideas?

---

I am trying to place a jquery progress bar upon loading. My current structure is java and backbone.

When i come into the backbone controller, I want to initialise the progress bar, and after each ajax call update the value like the following

    initialize: function() {

    $("#progressbar").progressbar({ 
        value: 0
    });

    var tasks = $.ajax({
      dataType: "json",
      async:false,
      url: "http://localhost:8888/chathau5/rest/tasks/list",
      success:function(data,response) {
        tsks = data;
      }
    });

    $("#progressbar").progressbar({ 
        value: 50
    });

    var tasks2 = $.ajax({
      dataType: "json",
      async:false,
      url: "http://localhost:8888/chathau5/rest/tasks/list2",
      success:function(data,response) {
        tsks = data;
      }
    });

    $("#progressbar").progressbar({ 
        value: 100
    });

In my index.html i have But the progress bar does not show at all.....unless i wrap alerts around each $progress bar update....

In my backend java i am running the thread sleep for testing purposes...

if i put alerts around each progress bar update in the above, it works... i am not sure how this is happening... any ideas how to fix this

Answer 1

Your progressbar code needs to go inside the success function

var tasks = $.ajax({
      dataType: "json",
      async:false,
      url: "http://localhost:8888/chathau5/rest/tasks/list",
      success:function(data,response) {
        tsks = data;
        $("#progressbar").progressbar({ 
          value: 50
        });
      }
    });

Answer 2

The issue is most likely caused by the fact that when you call jQuery.ajax with the async:false option, the AJAX call blocks the GUI thread for the duration of the execution, so the browser can't update the progress bar. You should make your AJAX calls asynchronous, and update the progress bar after each step has succeeded:

The simple way:

$("#progressbar").progressbar({ 
    value: 0
});

//make first call
var tasks = $.ajax({
  dataType: "json",
  url: "http://localhost:8888/chathau5/rest/tasks/list",
  success:function(data,response) {

    //first call succeeded
    tsks = data;
    $("#progressbar").progressbar({ 
        value: 50
    });

    //make second call
    var tasks2 = $.ajax({
      dataType: "json",
      url: "http://localhost:8888/chathau5/rest/tasks/list2",
      success:function(data,response) {

        //second call succeeded
        tsks = data;
        $("#progressbar").progressbar({ 
            value: 100
        });
      }
    });
  }
});

This solution is far from perfect. It still makes the two AJAX requests sequentially, which is sub-optimal compared to making the requests concurrently. Maybe something like:

var $progressbar = $("#progressbar");
var progress = 0;
var updateProgress = function(amount) {
  $progressbar.progressbar({value:progress+=amount});
};

updateProgress(0);

$.ajax({
  dataType:"json", 
  url:"http://localhost:8888/chathau5/rest/tasks/list",
  success: function(data, response) {
    updateProgress(50);
  }
});

$.ajax({
  dataType:"json", 
  url:"http://localhost:8888/chathau5/rest/tasks/list2",
  success: function(data, response) {
    updateProgress(50);
  }
});

Answer 3

First, when something like an alert is helping, it's usually because you have a concurrency bug, meaning that something is finishing or not finishing before something else. They're really hard to detect. I would guess that the #progressbar is not actually on the screen when initialize gets called. I could do a quick console.log($("#progressbar")); on the first line of initialize, just to be sure it's actually there.

Secondly, this is something of an aside but it might help you understand how concurrency errors can take place. We have no guarantee that the first ajax call will finish first. That's the asynchronous nature of ajax, we give up control to our callbacks at that point and then we continue with the rest of the method. So your initialize method is probably finishing, before either of those two success methods get reached. For that reason it's best to nest the two calls.

// I like keeping my display code separated out like this.
this.updateProgress = function( newValue )
{
  $("#progressbar").progressBar({value:newValue}); 
}

$.ajax({ // first call
  success: function() // done loading when this gets called
  {
    this.updateProgress(50);
    $.ajax({ // second call
      success: function() // all done loading at this point
      {
        this.updateProgress(100);
      }  
    });
  }
});

That way, you can be sure that one loads after another. No reason not to do it at the same time like in your example, but this way we have a guarantee.