无法在循环中睡觉

Question

我想在每次循环时暂停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);
}

关于如何让它发挥作用的任何想法？

Answer 1

这个函数的工作方式更像是一个普通的 for 循环，而实际上不是

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

1. 开始之前（即var i=0你定义一个变量）
2. 再次运行代码之前的条件（即i < 10，而我未满 10 岁）
3. 每次完成代码时的动作（i++ i 加一）

代码

(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/

Answer 2

您将函数调用的返回值传递给setTimeout 而不是函数。试试下面的代码：

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

如果您想知道为什么调用被包装在匿名函数中：如果没有该函数，每个 setTimeout 回调都会收到相同的i，因此当回调触发时，它总是10。匿名函数在内部创建了一个新的i，它没有连接到循环变量。

Answer 3

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

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

Answer 4

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

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

Answer 5

试试这个，它肯定会帮助所有想如何让它在 For 循环中工作的等待属性的人...... 在此 URL 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);