为什么一切都在Javascript中使用setTimeout显示?

我试图在javascript中向下滚动屏幕,然而,在执行时,它只是说了一下并立即显示所有内容。 所以它没有用$("#Menu").html('')清除$("#Menu").html('')函数和setTimeout(function {},500)只是为整个页面而不是代码段设置超时。

 var MenuData = [ {'Name':'pictures','x':'30'}, {'Name':'blog','x':'50'}, {'Name':'contact','x':'42'} ] ; var PositionArray = new Array(); $(document).ready(function () { for (var count = 0; count < 1000; count++) { $("#Menu").html(''); if (PositionArray[count] != null) { PositionArray[count]++; } else { PositionArray[count] = 0; } setTimeout(function () { for (var i in MenuData) { $("#Menu").append('
123
'); } }, 500); } });

这是小提琴: http : //jsfiddle.net/LbjUP/

编辑:代码中有一点不适用于该问题的错误。 这是新的: http : //jsfiddle.net/LbjUP/1/ ,我刚将PositionArray [count]移动到setTimeout函数作为PositionArray [i]

如评论中所述,您将同时创建1000个超时500毫秒 – 在500毫秒后,所有这些超时都将被执行。 你想要的是增加每个预定function的超时:

 setTimeout(function() { // do something }, count * 500); 

但是,一次创建1000个超时并不是一个好主意。 最好使用setInterval或“递归地”调用setTimeout直到达到1000的计数,这样您一次只能有一个活动超时。

 var count = 0; function update() { // do something if (++count < 1000) setTimeout(update, 500); // else everything is done } update(); 

此外,如果您打算在循环中创建超时,请确保在循环运行后访问计数器变量时熟悉闭包及其行为。

尝试

 function recurse ( cnt ) { for (var i in MenuData) { $("#Menu").append('
123
'); } if (cnt < 1000){ setTimeout(function () { recurse(cnt + 1); }, 500); } } $("#Menu").html(''); if (PositionArray[count] != null) { PositionArray[count]++; } else { PositionArray[count] = 0; } recurse(0);