加载HTML表格中每一行的延迟

我正在从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("" + student.Name + ""); }, 1000); } 

我希望表能够延迟逐个加载行。

我怎么做？ 我用1秒尝试了SetTimeout ，但由于某种原因，它无法正常工作。 该表在1秒后完全加载。

Answer 1

您的代码无效，因为每行调用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("" + student.Name + ""); }, 1000*n); } 

Answer 2

工作小提琴

jQuery的

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

链接到结果

希望这是你要找的…… !!

Answer 3

SetTimeout只运行一次。 你想要的是SetInterval所以它像时钟一样运行。 这就是我解决它的方法：

 // From your example before function LoadRow(student) { $("#tbl tbody").append("" + student.Name + ""); } // 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(`td>${student.Name}`); setTimeout(function (student) { // Recall the function after 0.15 second LoadRow(list); }, 150); }