0

我有一个网络应用程序。

我的应用程序加载了大量数据，并进行了大量操作。因此，我尝试在客户端查看程序的处理进度。我喜欢这样：

<--Here I want to display the process:-->
<h3 id="progressStatus"></h3>

当用户单击按钮时，程序启动。

<input id="openSystem" type="button" onclick="openSystem();"/>

例如我调用两个主要函数：

<script type="text/javascript">

  function openSystem(){
    loadSettings();
    loadParameters();
  }

在每个功能开始之前，我想更改“progressStatus”以显示当前进程。

  function loadSettings(){
    document.getElementById('progressStatus').innerHTML = 'Please wait. Loading settings...';
    $.ajax...//do something
  }

  function loadParameters(){
    document.getElementById('progressStatus').innerHTML = 'Please wait. Loading parameters...';
    $.ajax...//do something
  }
</script>

但问题是它只显示最近函数的字符串，并且在工作时没有更新。

所以我在这里的例子，它只显示属于最近函数的“加载参数”，但它忽略了第一个字符串。

有趣的是，如果我之前写过 'alert()' 命令，那么它会立即写入.. 例如这里：

  function loadSettings(){
    alert();
    document.getElementById('progressStatus').innerHTML = 'Please wait. Loading settings...';
    $.ajax...//do something
  }

有人知道我如何在工作时写入 HTML，以便可以一遍又一遍地写入同一个地方吗？

谢谢，

雷菲尔

4

1 回答 1

1

进度显示（伪代码）：

var done = 0;
var jobs_total = 10; // for ex. 10 functions

function DrawProcessBar(text) {
  var process_percent = done * 100 / jobs_total;
  // output like "Finished loading ajax_job2 20%"
  document.getElementById('progressStatus').innerHTML = text + ' ' + Math.floor(process_percent) + '%';
}

function ajax_job1() {
  $.ajax(onSuccess:function(){ done++; DrawProcessBar('Finished loading ajax_job1') });
}
function ajax_job2() {
  $.ajax(onSuccess:function(){ done++; DrawProcessBar('Finished loading ajax_job2') });
}
etc.

有人知道我如何在工作时写入 HTML，以便可以一遍又一遍地写入同一个地方吗？

如果您在同一时刻执行所有功能，那么这样做是没有意义的。

无论如何，您总是可以延迟每次 HTML 写入setTimeout以产生良好的效果（仍然毫无意义:)）

于 2013-01-27T11:45:12.147 回答