在HTML表中加载每行时增加延迟

Adding delay on loading each row in HTML table

本文关键字：增加 延迟 加载 HTML      更新时间：2023-09-26

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

工作小提琴

jQuery 

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

链接结果

希望这是你正在寻找的…!!

您的代码不工作，因为append在每一行的n:1000处被调用。试试下面的代码，它会解决你的问题，但它肯定不是最好的方法。

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

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

应该试试这个方法

$(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);
}
相关文章：