1

编辑：

我什至无法在控制器中使用主干 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和backbone。

当我进入主干控制器时，我想初始化进度条，并在每次 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中，我正在运行线程睡眠以进行测试......

如果我在上面的每个进度条更新周围发出警报，它会起作用...我不确定这是怎么发生的...任何想法如何解决这个问题

4

3 回答 3

0

您的进度条代码需要进入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
        });
      }
    });
于 2013-02-26T22:33:52.450 回答
0

首先，当警报之类的东西有帮助时，通常是因为你有一个并发错误，这意味着某事正在完成或没有在其他事之前完成。他们真的很难被发现。我猜想在调用初始化时#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);
      }  
    });
  }
});

这样，您可以确保一个接一个地加载。没有理由不像您的示例那样同时执行此操作，但是这样我们就有了保证。

于 2013-02-27T00:35:45.060 回答
0

该问题很可能是由于当您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);
  }
});
于 2013-02-26T22:38:40.180 回答