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] を setTimeout 関数に PositionArray[i] として移動しました

4

2 に答える 2

2

コメントに記載されているように、同時に 500 ミリ秒の 1000 のタイムアウトを作成しています。500 ミリ秒後にすべてが実行されます。必要なのは、スケジュールされたすべての機能のタイムアウトを増やすことです。

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

ただし、一度に 1000 のタイムアウトを作成することは、あまり良い考えではありません。一度にアクティブなタイムアウトが1つだけになるように、カウントが1000に達するまで「再帰的に」使用setIntervalまたは呼び出す方がよいでしょう。setTimeout

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 に答える