javascript - 時限ループ、10秒

Question

私は現在これを手に入れました：

var xnumLow = 3000;
var xnumHigh = 4900;

var ynumLow = 9969;
var ynumHigh = 13900;

var ts = Math.round((new Date()).getTime() / 1000);

for (y=ynumLow; y<ynumLow; y++)
{
    for(x=xnumLow; x<xnumHigh; x++)
    {
        $('#box').append(y + " - " + x);
    }
}

今度は、10秒ごとに新しい全体の「行」を追加したいので、すべてを一度に追加することはありません。

y「行」は外側のfor()ループです

これどうやってするの？

私が得た：

var refreshId = setInterval(function(){ (...) }, 10000);

しかし、正しく機能するために、これを上記のコードとマージする場所がわかりません。

Answer 1

var y = ynumLow;

function addRow()
{
    for (x = xnumLow; x < xnumHigh; x++) {
        $('#box').append(y + " - " + x);
    }

    if (y++ < ynumHigh)
        refreshId = setTimeout(addRow, 10000);
}

addRow();

明確にするためにピートが提案したように編集

Answer 2

(function () {
    var xnumLow = 3000,
        xnumHigh = 4900,
        ynumLow = 9969,
        ynumHigh = 13900,
        currentY = ynumLow,
        delay = 500,
        displayData = function () {        
            var out = [],
            x;            
            for (x=xnumLow; x<xnumHigh; x++) {
                out.push( currentY + "-" + x );          
            }            
            console.log(out.join(","));  //do the append here      
            currentY++;            
            if (currentY<ynumHigh) {
                window.setTimeout(displayData,delay);
            }        
        };
    displayData()
})();

Answer 3

setInterval(function () {
    // code that appends a box
}, 10000);

https://developer.mozilla.org/en-US/docs/DOM/window.setInterval

Answer 4

私はそれを次のようにします：

var xnumLow = 3000;
var xnumHigh = 4900;

var ynumLow = 9969;
var ynumHigh = 13900;
var x, y = ynumLow; //don't forget to declare your variables!

var ts = Math.round((new Date()).getTime() / 1000);

(function addYRow() { //Create a function that adds the X elements
    for(x=xnumLow; x<xnumHigh; x++)
    {
        $('#box').append(y + " - " + x);
    }

    y++; //don't forget to increment y
    if(y < ynumHigh) { //only re-call if we aren't done yet
        setTimeout(addYRow, 10000); //Recall the function every 10 seconds.
    }
}());

他のいくつかの答えを見ると、特定のポイントから10秒後に発生する一連のことを設定したくないことを理解することが重要です（これは、ループ呼び出しを行う場合に発生しますsetTimeout()。代わりに、私はあなたを想定しています行を追加してから10秒待ってから、別の行を追加します。これは、行を追加し（通常、私の場合はaddYRow()関数）、10秒待ってからadd-a-rowを再度呼び出すことによってのみ実現できます。働き。

列の遅延：

x行で500msの遅延を行う方法についての質問に答えると、それは少し注意が必要ですが、それほど悪くはありません。もう一度ネストする必要があります。

var y = ynumLow; //don't forget to declare your variables!

var ts = Math.round((new Date()).getTime() / 1000);

(function addYRow() { //Create a function that adds the X elements
    var x = xnumLow;
    (function addXCol() { //Create a function that adds each X element
        $('#box').append(y + " - " + x);

        x++;
        if(x < xnumHigh) { //if x is not done, call  addXCol 500ms later
            setTimeout(addXCol, 500);
        } else {
            y++;
            if(y < ynumHigh) { //If x is done but y isn't, call addYRow 10 seconds later
                setTimeout(addYRow, 10000); //Recall the function every 10 seconds.
            }
        }
    }());
}());

addXCol()列/行の追加の開始を遅らせる場合（たとえば、行が追加されてから最初の列が追加されるまでに500ミリ秒の遅延を設定する場合は、式の作成を次のように調整する必要があります。こんな風に見える：

setTimeout(function addXCol() { //Create a function that adds each X element
    //...
}, 500);

これにより、最初の遅延が発生します。お役に立てば幸いです。

Answer 5

このようなもの？

var refreshId = setInterval(function(){
  $('#box').append(++y + " - " + x);
}, 10000);