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“行”，所以它们都不会一次全部追加。

y“行”是外for()循环

我怎样才能做到这一点？

我有：

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

但我不知道在哪里将它与上面的代码合并，以便正确工作。

Answer 1

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

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

Answer 2

var y = ynumLow;

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

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

addRow();

为清楚起见，按照皮特的建议进行了编辑

Answer 3

(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 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 行中延迟 500 毫秒的问题时，这有点棘手，但还不错。你只需要再嵌套一次：

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

请注意，如果您想延迟添加列/行的开始（例如，如果您想在添加行和添加第一列之间延迟 500 毫秒，则需要将addXCol()表达式创建调整为看起来像这样：

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

这将导致最初的延迟。希望有所帮助。

Answer 5

像这样的东西？

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