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

Working Fiddle

jQuery

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

<强> Link to the result

希望这就是你要找的...... !!

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

在HTML表格中加载每一行时添加延迟

4 个答案: