使用setTimout在$ .each内的jQuery $ .each

Question

我正在尝试在嵌套的$.each使用setTimeout() 。 当我运行此脚本时， console.log立即显示main0,main1,main2这是错误的，并且应该每5秒一次显示一次，例如第二个$.each test ...值。

var i = 1;
var indexArrayMain = [1,2,3];
var indexArray = [3,6,9];
var timerx = new Array();

// main each
$(indexArrayMain).each(function(indexArrayMain) {
  console.log('main' + indexArrayMain);
  // sub each
  $(indexArray).each(function(indexArraykey) {
    function internalCallback(i, indexArraykey) {
      return function() {
        val = indexArray[indexArraykey];
        console.log("test " + i + val);
      }
    } 

    timerx[i] = setTimeout(internalCallback(i, indexArraykey), i * 5000);                     
    i++;
  }); 
}); 

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的值？），则类似：

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

Answer 5

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

那是因为您要立即打印这些值：

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

    // other, unrelated code
});

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

每5秒应一一显示

然后，您需要使用诸如setTimeout来引入延迟。 如果您希望它是“每5秒”，那么这听起来像是集合的索引加上5秒钟乘以1。 所以像这样：

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

    // other, unrelated code
});

请注意，这将与您的其他超时无关 ，并且不能保证它们之间的计时准确。 如果希望它们始终以相同的顺序执行，则希望使用相同的超时而不是单独的超时，或者通常是重新考虑要尝试执行的结构。 （尚不完全清楚，当前您要做的只是登录到控制台，因此顺序并不重要。）