1

我试图让一些东西在 javascript 中向下滚动屏幕，但是，在执行时，它只会说一点并立即显示所有内容。所以它没有用$("#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('<div style="position:relative; left:' + MenuData[i].x + 'px; top:' + PositionArray[i] + 'px; ">123</div>');
            }
        }, 500);

    }
});

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

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

4

2 回答 2

2

如评论中所述，您正在同时创建 1000 个 500 毫秒的超时 - 500 毫秒后，所有超时都将被执行。您想要的是增加每个预定功能的超时时间：

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

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

于 2013-09-05T22:37:31.327 回答
0

尝试

function recurse ( cnt ) {
    for (var i in MenuData) {
        $("#Menu").append('<div style="position:relative; left:' + MenuData[i].x + 'px; top:' + PositionArray[i] + 'px; ">123</div>');
    }
    if (cnt < 1000){
       setTimeout(function () { recurse(cnt + 1); }, 500);
    }
}

$("#Menu").html('');
if (PositionArray[count] != null) {
    PositionArray[count]++;
} else {
    PositionArray[count] = 0;
}
recurse(0);
于 2013-09-05T22:45:44.760 回答