在加載HTML表中的每一行時增加延遲

Question

我正在從Jquery動態加載HTML表的數據。

$(document).ready(function () {

    for (var i = 0; i < StudentsList.length; i++) {
        LoadRow(StudentsList[i]);
    }

});
function LoadRow(student) {
        setTimeout(function (student) {
         $("#tbl tbody").append("<tr class='trStyleSummary'><td>" + student.Name + "</td></tr>");
         }, 1000);
}

我希望表延遲加載一行一行。

我怎么做？ 我嘗試了1秒的SetTimeout ，但是由於某種原因，它不起作用。 該表將在1秒后完全加載。

Answer 1

工作小提琴

jQuery的

$("tbody tr").each(function () {
   $(this).fadeIn($(this).index() * offset);
});  

鏈接到結果

希望這就是您想要的...！

Answer 2

您的代碼無法正常工作，因為每行n：1000都會調用append。 嘗試執行以下代碼，它可以解決您的問題，但這當然不是最佳方法。

$(document).ready(function () {

    for (var i = 0; i < StudentsList.length; i++) {
        LoadRow(StudentsList[i],i);
    }

});
function LoadRow(student,n) {
        setTimeout(function (student) {
         $("#tbl tbody").append("<tr class='trStyleSummary'><td>" + student.Name + "</td></tr>");
         }, 1000*n);
}

Answer 3

SetTimeout只運行一次。 您想要的是SetInterval ，使其像時鍾一樣運行。 這就是我要解決的方法：

// From your example before
function LoadRow(student) {
  $("#tbl tbody").append("<tr class='trStyleSummary'><td>" + student.Name + "</td></tr>");
}    

// Say for example you have these as your students: 
var students = [{ Name: 'joe' }, { Name: 'matt' }, { Name: 'sherry' }];

// The index of the last student
var l = students.length;

// Start a Count index
var i = 0;

// START!
var t = setInterval(function(){

  // Load one
  LoadRow( students[i] );

  // Increment up
  i++;

  // Check if all is done, if so stop and clear out
  if (i == l) clearInterval(t);

}, 1000);

Answer 4

應該這樣嘗試

$(document).ready(function () {
    LoadRow(StudentsList);        
});

function LoadRow(list) {
    if(list != undefined || list.length < 1) {
        // done
        // do something else
        return;
    }

    // Get first item
    const student = list.shift();

    $("#tbl tbody").append(`<tr class='trStyleSummary'>td>${student.Name}</td></tr>`);
    setTimeout(function (student) {
        // Recall the function after 0.15 second
        LoadRow(list);
     }, 150);
}