如何在Backbone中使JQuery進度欄顯示多個Ajax調用的進度？

Question

編輯：

我什至無法使用骨干js進行簡單的設置，例如在控制器中

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...

},

有任何想法嗎？

---

我試圖在加載時放置一個jquery進度欄。 我當前的結構是Java和骨干網。

當我進入骨干控制器時，我想初始化進度條，並在每次ajax調用之后更新值，如下所示

    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
    });

在我的index.html中，但是進度條根本不顯示.....除非我在每個$ progress bar更新周圍包裹警報。

在我的后端Java中，我出於測試目的運行線程睡眠。

如果我在上面的每個進度條更新周圍放置警報，它將起作用...我不確定這是如何發生的...有關如何解決此問題的任何想法

Answer 1

您的progressbar代碼需要放入success函數中

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

該問題很可能是由於以下事實引起的：當您使用async:false選項調用jQuery.ajax時，AJAX調用會在執行期間阻止GUI線程，因此瀏覽器無法更新進度條。 您應該使AJAX調用異步，並在每個步驟成功之后更新進度條：

簡單的方法：

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

該解決方案遠非完美。 它仍然順序地發出兩個AJAX請求，與同時發出請求相比，這是次優的。 也許像這樣：

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

首先，當警報之類的東西有幫助時，通常是因為您有一個並發錯誤，這意味着某件事先完成還是未完成。 他們真的很難被發現。 我猜想初始化調用時#progressbar實際上不在屏幕上。 我可以做一個快速的console.log（$（“＃progressbar”））; 在初始化的第一行上，只是要確保它確實存在。

其次，這是一個問題，但它可以幫助您了解如何發生並發錯誤。 我們不能保證第一個ajax調用將首先完成。 那是ajax的異步特性，我們在那時放棄對回調的控制，然后繼續進行該方法的其余部分。 因此，在達到這兩種成功方法之一之前，您的初始化方法可能已完成。 因此，最好嵌套兩個調用。

// 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);
      }  
    });
  }
});

這樣，您可以確保一個接一個地加載。 沒有理由不像您的示例那樣同時執行此操作，但是通過這種方式，我們可以保證。