Question

我正在尝试在嵌套setTimeout()中使用$.each。当我运行此脚本时，console.log立即立即显示main0,main1,main2这是错误的，并且应该每5秒后逐个显示，例如来自第二个test ...的{{1}}值。< / p>

$.each

http://jsfiddle.net/Guxdz/8/

Answer 1

你有console.log('main'+indexArrayMain); 这是在第一个$.each下写的，这个日志没有在超时回调中运行，这使它立即运行。

Answer 2

您需要等待超时结束才能在阵列上运行下一项。

试试这个：

var indexArrayMain = [1,2,3];
var indexArray = [3,6,9];

var head = arr => arr[0]
var tail = arr => arr.slice(1)

function log(main, inner, i) {
	if (main.length === 0 || inner.length === 0) return console.log('end');
  console.log('main-'.concat(head(main)))
  console.log('inner-'.concat(head(inner)))
  setTimeout(log, i * 5000, tail(main), tail(inner), i++)
}

log(indexArrayMain, indexArray, 1)

Answer 3

setTimeout函数创建一个新的执行周期。要解决这个问题，你应该了解javascript事件循环和并发模型。

Answer 4

为了防止需要嵌套循环并保持多个选项打开（并且为了更容易测试结果），可以事先将数组展平。如果我的设置正确（indexArrayMain的值似乎没有使用？），例如：

＆＃13;

let  i = 1, indexArrayMain = [1,2,3],
	indexArray = [3,6,9],
  arr = indexArrayMain.reduce((a,el,ind)=>{a.push('main' + ind);a.push(...indexArray.map(ind2 => 'test' + i++ +ind2 )); return a; } , []);

//imho using setInterval on the flattened array would be cleaner, but using the same setTimeout approach:
arr.forEach(function(el,ind){
	setTimeout(console.log.bind(null,el), ind * 5000);                     
});

＆＃13;

Answer 5

console.log立即立即显示main0，main1，main2

那是因为你正在立即打印这些值：

$(indexArrayMain).each(function(indexArrayMain) {
    console.log('main' + indexArrayMain);

    // other, unrelated code
});

该代码中没有任何内容可以导致延迟，它只是循环遍历集合并将值记录到控制台。

每隔5秒就应该逐个显示

然后你需要使用类似setTimeout的东西来引入延迟。如果你希望它是“每5秒钟”，那么听起来它就像是集合的索引加上五秒钟。所以像这样：

$(indexArrayMain).each(function(indexArrayMain) {
    setTimeout(function () {
        console.log('main' + indexArrayMain);
    }, (indexArrayMain + 1) * 5000);

    // other, unrelated code
});

请注意，这将是独立您的其他超时，并且它们之间的时间安排不保证是准确的。如果您希望它们始终以相同的顺序执行，那么您希望使用相同的超时而不是单独的超时，或者通常可能重新考虑您尝试执行的操作的结构。（目前还不完全清楚，目前您所做的只是登录控制台，因此订单并不重要。）

使用setTimout在$ .each中使用Jquery $ .each

5 个答案: