Question

编辑：

我甚至无法使用骨干j进行简单的设置，例如在控制器中

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中我有但是进度条根本没有显示.....除非我在每个$进度条更新周围打开警报....

在我的后端java中，我正在运行线程睡眠以进行测试......

如果我在上面的每个进度条更新中发出警报，它可以工作......我不确定这是怎么回事......任何想法如何解决这个问题

Answer 1

您的进度条代码需要进入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

问题很可能是因为当您使用jQuery.ajax选项调用async:false时，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（$（＆＃34;＃progressbar＆＃34;））;在初始化的第一行，只是为了确定它实际上在那里。

其次，这是暂时的，但它可以帮助您理解并发错误是如何发生的。我们无法保证第一个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);
      }  
    });
  }
});

这样，你可以确定一个接一个地加载。没有理由不在你的例子中同时做到这一点，但这样我们就有了保证。

如何在Backbone中创建JQuery Progress Bar显示多个Ajax调用的进度？

3 个答案: