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

Question

How can I delay each row and while delay interval it shows processing please wait...? I tried setInterval() but it does not work.

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;
}

Data returned:

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>

Can you show us your ajax response ? `SetTimeout` will help! — Rayon, Dec 27 '15 at 06:27
Please show more code. Also you cannot return a result from a function that does an async call — mplungjan, Dec 27 '15 at 06:31
Gunjan Chaudhary Gunajndd@sbpbic.com 8510847200 http://local.assessment/pdf/1828182.pdf Tannu Kuamari Tannukumaridd@sbpbic.com 8743992787 http://local.assessment/pdf/1828182.pdf Kiran Paswan Kiranpasddwan@sbpbic.com 8800134507 http://local.assessment/pdf/1828182.pdf — Dheeraj Sharma, Dec 27 '15 at 06:32
this is data come as response but need some delay in each row — Dheeraj Sharma, Dec 27 '15 at 06:33
@rayon yeah it was json and now i make this in array to show in html because we make this string in server side — Dheeraj Sharma, Dec 27 '15 at 06:40
And when sharing UPDATE THE QUESTION instead of pasting the code in comments — mplungjan, Dec 27 '15 at 06:42

score 0 · Answer 1 · edited May 23 '17 at 10:28

Are you trying to achieve something like this:

setInterval

If you want to execute a function continuously with delay.

Example:

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

setTimeout

If you want to execute a function after certain delay.

Example:

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

JSFiddle

Code

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>

Edit 1

Updated logic to replace innerHTML += to appendChild. Reference Why is “element.innerHTML+=” bad code?. Credits @Rayon Dabre

Looks good! __But__, `innerHTML +=` is terrible. Also explain why `setInterval` is preferred over `SetTimeout ` — Rayon, Dec 27 '15 at 06:43
`setInterval` will loop automatically. Creating a `timeout` and adding it inside a loop is an over kill, i my understanding. Also my apologies for `innerHTML +=`. Will look for a better solution and will update my answer. Thanks for pointing it. — Rajesh, Dec 27 '15 at 06:52
@RayonDabre have updated my code and credited. Thanks for pointing out. — Rajesh, Dec 27 '15 at 07:02
innerHTML is not horrible, only here where you already use createElement and appendChild is it silly. — mplungjan, Dec 27 '15 at 07:46

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

1 Answers1

setInterval

setTimeout

Code

Edit 1