当每一行都打印成功调用时，需要时间延迟

need time delay when each row has printed on success call?

本文关键字：调用 成功 时间延迟 打印 一行      更新时间：2023-09-26

如何延迟每一行，而延迟间隔显示processing please wait...？我试过setInterval()，但它不起作用。

url: '/assessment/omr-evaluation/post-omr-skill-based-career-test.aspx',
  data: {
    row: data
  },
  async: false,
  success: function(data) {
    var arr = new Array();
    var names = data
    arr = names.split('^');
    var userTable = $('#user_table_id');
    if (userTable == null || userTable.length == 0) {
      var table_html = "<table id='user_table_id'>";
      table_html += "<tr><td>Name</td><td>Email</td><td>Phone</td><td>PDf</td></tr>";
      table_html += "</table>";
      $('#candy').html(table_html);
    }
    userTable = $('#user_table_id');
    // table_html += "<tr><td>Name</td><td>Email</td><td>Phone</td><td>PDf</td></tr>";
    var newLine = $("<tr><td>" + arr[0] + "</td><td>" + arr[1] + "</td><td>" + arr[2] + "</td><td>" + arr[3] + "</td></tr>");
    userTable.append(newLine);
  },
  error: function(result) {
    alert("Error");
  }
})
 return result;
}

返回的数据：

Gunjan Chaudhary    Gunajndd@....com    8510847200  <a href="http://local.assessment/pdf/1828182.pdf" rel="nofollow">local.assessment/pdf/1828182.pdf</a> Tannu Kuamari Tannukumaridd@....com   8743992787  <a href="http://local.assessment/pdf/1828182.pdf" rel="nofollow">local.assessment/pdf/1828182.pdf</a> Kiran Paswan  Kiranpasddwan@....com   8800134507  <a href="http://local.assessment/pdf/1828182.pdf" rel="nofollow">local.assessment/pdf/1828182.pdf</a>

你想实现这样的目标吗：

setInterval

如果您想连续执行一个函数，并且有延迟。

示例：

var interval = setInterval(function to be executed..., delay)

setTimeout

如果您想在一定延迟后执行函数。

示例：

var timeout = setTimeout(function to be executed..., delay)

JSFiddle

代码

function createData() {
  var data = [];
  for (i = 0; i < 10;) {
    data.push({
      "index": i,
      "rowNum": ++i,
      "content": "test_" + i
    });
  }
  return data;
}
function appendRow(data, i) {
  var html = document.createElement("tr");
  var tdHtml = "";
  tdHtml += "<td>" + data[i].index + "</td>";
  tdHtml += "<td>" + data[i].rowNum + "</td>";
  tdHtml += "<td>" + data[i].content + "</td>";
  html.innerHTML = tdHtml;
  document.getElementById("content").appendChild(html);
}
function loadTable() {
  var data = createData();
  var index = 0;
  var interval = setInterval(function() {
    appendRow(data, index);
    index++;
    if (index >= data.length)
      window.clearInterval(interval);
  }, 1000);
}
loadTable();
<table id="content">
  <tr>
    <th>Index</th>
    <th>Row</th>
    <th>Content</th>
  </tr>
</table>

编辑1

更新逻辑以将innerHTML +=替换为appendChild。参考为什么"element.innerHTML+="是错误代码？。署名@Rayon Dabre

相关文章：