Question

我有一个网络应用程序。

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

<--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，以便可以一遍又一遍地写到同一个地方？

谢谢，

Refael

Answer 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，以便可以反复写入同一个地方？

如果你在同一时刻执行所有功能，那就没有意义了。

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

在加载系统期间显示进度

1 个答案: