无法设法在循环内睡觉

时间:2012-03-26 21:42:12

标签: javascript loops delay sleep

我想在每次循环时暂停1 second,在其他情况下通常很容易做类似的暂停,但在使用循环时,似乎变得更难:

for (var i=0 ; i < 10 ; i++) {
    document.write (i + "<br>");
    // I want to wait 1 second here
}

这是我成千上万次尝试失败的一个例子:

function writeMsg (index) {
    document.write (index + "<br>");
}

for (var i=0 ; i < 10 ; i++) {
    setTimeout (writeMsg(i), 1000);
}

有关如何使其发挥作用的任何想法?

5 个答案:

答案 0 :(得分:9)

这个函数更像是正常for循环而不是

你需要考虑到for在分号之间得到3个参数。

  1. 开始之前(即var i=0你定义一个变量)
  2. 再次运行代码之前的条件(即i < 10,而我不到10岁)
  3. 每次再次完成代码时的动作(i++将一个添加到i)
  4. 代码

    (function() {
        // Define a variable
        var i = 0,
            action = function() {
                // Condition to run again
                if (i < 10) {
                    document.write(i + "<br>");
    
                    // Add one to i
                    i++;
                    setTimeout(action, 1000);
                }
            };
    
        setTimeout(action, 1000);
    })();
    

    以下是此代码的jsfiddle,演示了它的工作原理: http://jsfiddle.net/sg3s/n9BNQ/

答案 1 :(得分:4)

将函数调用的返回值传递给setTimeout而不是函数。请尝试以下代码:

for (var i = 0; i < 10; i++) {
    (function(i) {
        setTimeout(function() {
            writeMsg(i);
        }, 1000*i);
    })(i);
}

如果你想知道为什么调用被包装在一个匿名函数中:没有该函数,每个setTimeout回调都会收到相同的i,所以当回调激活它时,它总是10。匿名函数在内部创建一个未连接到循环变量的新i

答案 2 :(得分:1)

经典函数在循环问题。一个原型解决方案:

function createCallback(i) {
    return function () {
        writeMsg(i);
    };
}

function writeMsg (index) {
    document.write (index + "<br>");
}

for (var i=0 ; i < 10 ; i++) {
    setTimeout (createCallback(i), 1000*i);
}

答案 3 :(得分:1)

10次超时都是基于调用setTimeout()的时间。所以,它们都是在同一时间触发的。

for (var i=0; i < 10; i++) {
    (function(idx){
        setTimeout(function(){
            document.write(idx+"<br/>");
        },1000*idx);
    })(i);
};

答案 4 :(得分:0)

尝试这一点肯定会帮助所有人都认为如何让它在For Loop中等待属性...... 在此网址http://www.shopjustice.com/the-collections/C-10329中尝试此代码。

var var2;
var tmp;
var evt;
var i=0;
var res = document.getElementsByClassName('mar-plp-filter-content nav nav--stacked')[0].children.length;
tmp = document.getElementsByClassName('mar-plp-filter-content nav nav--stacked')[0].children;
function myfunc()
{
if(i<res)
{
var2 = tmp[i].getElementsByTagName("span")[0].getElementsByClassName("inverted")[0];
// alert(var2.innerHTML);
var evObj = document.createEvent('MouseEvents');
evObj.initEvent( 'mouseover', true, false );
var2.dispatchEvent(evObj);
var2.style.backgroundColor="GREEN";
i++;
setTimeout(myfunc,3000);
}
};
setTimeout(myfunc,3000);