添加延迟加载 HTML 表中的每一行答案

【问题标题】：Adding delay on loading each row in HTML table添加延迟加载 HTML 表中的每一行
【发布时间】：2014-06-21 00:05:38
【问题描述】：

我正在从 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 秒后完全加载。

【问题讨论】：

设置超时有什么问题？
@Ian：更新了帖子，回复了您的评论。
你怎么叫 LoadRow，只有一行。分享更多代码;)
@DurgeshChaudhary：更新

标签： javascript jquery html css

【解决方案1】：

Working Fiddle

jQuery

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

Link to the result

希望这就是你要找的……！！

【讨论】：

【解决方案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);
}

【讨论】：

它说 student.Name 未定义。有什么想法吗？
console.log(student) 将显示该学生是否真的拥有 Name 属性
在 LoadRow() 内部，我可以获取名称。但是在 settimeout 函数内部，名称是未定义的
这是因为范围。解决方案和解释在这里：stackoverflow.com/questions/2171602/…

【解决方案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);

【讨论】：

【解决方案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);
}

【讨论】：