Javascript 通过setTimeout函数循环

我正在尝试编写一个函数，它循环x次（本例中为3次）到x个步骤（本例中为步骤1，步骤2），循环时间为x秒（本例中，步骤1需要2秒，步骤2需要1秒）

因此，我希望它循环如下：

步骤1（2秒） 步骤2（1秒） 步骤1（2秒） 步骤2（1秒） 步骤1（2秒） 步骤2（1秒）

我有下面的代码，但它只在循环中迭代一次，我不知道为什么

jQuery('input').click(function () {
    for(i = 0; i < 3; i++){
        jQuery('div').html('Step 1');
        setTimeout(function() { 
            jQuery('div').html('Step 2');
        },2000);
        setTimeout(function() { 
            jQuery('div').empty();
        },2000 + 1000);
    }
});

jQuery（'input'）。单击（函数（）{
对于（i=0；i<3；i++）{
jQuery（'div'）.html（'step1'）；
setTimeout（函数（）{
jQuery（'div'）.html（'step2'）；
},2000);
setTimeout（函数（）{
jQuery（'div'）.empty（）；
},2000 + 1000);
}
});

我希望循环以相同的计时继续，但在点击

.empty（）后返回到开始处

jsiddle:
循环迭代3次，但超时总是相同的：2000和3000，因此您创建了3个相同的回调，将在2秒内执行，其他3个回调将在3秒内调用。这是您想要的，有6种不同的超时：


jQuery（'input'）。单击（函数（）{
var时间=0；
对于（i=0；i<3；i++）{
setTimeout（函数（）{
jQuery（'div'）.html（'step1'）；
}，时间+++*1000）；
setTimeout（函数（）{
jQuery（'div'）.html（'step2'）；
}，时间+++*1000）；
}
setTimeout（函数（）{
jQuery（'div'）.empty（）；
}，时间+++*1000）；
});

PS：确保您了解它的工作原理：JS是单线程的，因此for循环连续调用
setTimeout
6次。。。它们的开始时间几乎相同，循环重复3次，但超时总是相同的：2000和3000，因此您创建了3个相同的回调，将在2秒内执行，其他3个回调将在3秒内调用。这是您想要的，有6种不同的超时：


jQuery（'input'）。单击（函数（）{
var时间=0；
对于（i=0；i<3；i++）{
setTimeout（函数（）{
jQuery（'div'）.html（'step1'）；
}，时间+++*1000）；
setTimeout（函数（）{
jQuery（'div'）.html（'step2'）；
}，时间+++*1000）；
}
setTimeout（函数（）{
jQuery（'div'）.empty（）；
}，时间+++*1000）；
});

PS：确保您了解它的工作原理：JS是单线程的，因此for循环连续调用
setTimeout
6次。。。它们的开始时间几乎相同，循环重复3次，但超时总是相同的：2000和3000，因此您创建了3个相同的回调，将在2秒内执行，其他3个回调将在3秒内调用。这是您想要的，有6种不同的超时：


jQuery（'input'）。单击（函数（）{
var时间=0；
对于（i=0；i<3；i++）{
setTimeout（函数（）{
jQuery（'div'）.html（'step1'）；
}，时间+++*1000）；
setTimeout（函数（）{
jQuery（'div'）.html（'step2'）；
}，时间+++*1000）；
}
setTimeout（函数（）{
jQuery（'div'）.empty（）；
}，时间+++*1000）；
});

PS：确保您了解它的工作原理：JS是单线程的，因此for循环连续调用
setTimeout
6次。。。它们的开始时间几乎相同，循环重复3次，但超时总是相同的：2000和3000，因此您创建了3个相同的回调，将在2秒内执行，其他3个回调将在3秒内调用。这是您想要的，有6种不同的超时：


jQuery（'input'）。单击（函数（）{
var时间=0；
对于（i=0；i<3；i++）{
setTimeout（函数（）{
jQuery（'div'）.html（'step1'）；
}，时间+++*1000）；
setTimeout（函数（）{
jQuery（'div'）.html（'step2'）；
}，时间+++*1000）；
}
setTimeout（函数（）{
jQuery（'div'）.empty（）；
}，时间+++*1000）；
});

PS：确保您了解它的工作原理：JS是单线程的，因此for循环连续调用
setTimeout
6次。。。所有步骤的开始时间几乎相同
现在，步骤1直接在循环中，没有超时，因此所有三个步骤1都将立即发生。然后在一个超时中有步骤2，但是这三个步骤都有相同的时间延迟，所以它们都将在两秒钟后立即发生。您可以在不同的时间获得此信息：

   0: Step 1 (i = 0)
   0: Step 1 (i = 1)
   0: Step 1 (i = 2)
2000: Step 2 (i = 0)
2000: Step 2 (i = 1)
2000: Step 2 (i = 2)
3000: empty (i = 0)
3000: empty (i = 1)
3000: empty (i = 2)

你会想要这个：

   0: Step 1 (i = 0)
2000: Step 2 (i = 0)
3000: Step 1 (i = 1)
5000: Step 2 (i = 1)
6000: Step 1 (i = 2)
8000: Step 2 (i = 2)
9000: empty

将步骤1和步骤2设置为超时，并设置时间延迟，使它们在彼此之后发生，即使用
i*3000
作为偏移量。然后，您可以在最后一步后的单独超时中清空元素：

jQuery('input').click(function () {
  for(i = 0; i < 3; i++){
    setTimeout(function() { 
      jQuery('div').html('Step 1');
    }, i * 3000);
    setTimeout(function() { 
      jQuery('div').html('Step 2');
    }, i * 3000 + 2000);
  }
  setTimeout(function() { 
    jQuery('div').empty();
  }, 6000 + 3000);
});

jQuery（'input'）。单击（函数（）{
对于（i=0；i<3；i++）{
setTimeout（函数（）{
jQuery（'div'）.html（'step1'）；
}，i*3000）；
setTimeout（函数（）{
jQuery（'div'）.html（'step2'）；
}，i*3000+2000）；
}
setTimeout（函数（）{
jQuery（'div'）.empty（）；
}, 6000 + 3000);
});
现在，步骤1直接在循环中，没有超时，因此所有三个步骤1都将立即发生。然后在一个超时中有步骤2，但是这三个步骤都有相同的时间延迟，所以它们都将在两秒钟后立即发生。您可以在不同的时间获得此信息：

   0: Step 1 (i = 0)
   0: Step 1 (i = 1)
   0: Step 1 (i = 2)
2000: Step 2 (i = 0)
2000: Step 2 (i = 1)
2000: Step 2 (i = 2)
3000: empty (i = 0)
3000: empty (i = 1)
3000: empty (i = 2)

你会想要这个：

   0: Step 1 (i = 0)
2000: Step 2 (i = 0)
3000: Step 1 (i = 1)
5000: Step 2 (i = 1)
6000: Step 1 (i = 2)
8000: Step 2 (i = 2)
9000: empty

将步骤1和步骤2设置为超时，并设置时间延迟，使它们在彼此之后发生，即使用
i*3000
作为偏移量。然后，您可以在最后一步后的单独超时中清空元素：

jQuery('input').click(function () {
  for(i = 0; i < 3; i++){
    setTimeout(function() { 
      jQuery('div').html('Step 1');
    }, i * 3000);
    setTimeout(function() { 
      jQuery('div').html('Step 2');
    }, i * 3000 + 2000);
  }
  setTimeout(function() { 
    jQuery('div').empty();
  }, 6000 + 3000);
});

jQuery（'input'）。单击（函数（）{
对于（i=0；i<3；i++）{
setTimeout（函数（）{
jQuery（'div'）.html（'step1'）；
}，i*3000）；
setTimeout（函数（）{
jQuery（'div'）.html（'step2'）；
}，i*3000+2000）；
}
s
jQuery('input').click(function () {

    var times = 0,
        printStep1 = function(){
            JQuery('div').html('Step 1');
            setTimeout( printStep2, 1000 );
        },
        printStep2 = function(){
            JQuery('div').html('Step 2');
            if( times++ < 3 ) setTimeout( printStep1, 1000 );
        };

    printStep1();
});

document.querySelector('input').addEventListener( "click", function () {

    var times = 0,
        printStep1 = function(){
            document.querySelector('div').innerHTML = 'Step 1';
            setTimeout( printStep2, 1000 );
        },
        printStep2 = function(){
            document.querySelector('div').innerHTML = 'Step 2';
            if( times++ < 3 ) setTimeout( printStep1, 1000 );
        };

    printStep1();
});

var steps = [
    {
        timeout: 2000,
        action: function() { jQuery('div').html('Step 1'); },
    },
    {
        timeout: 1000,
        action: function() { jQuery('div').html('Step 2'); },
    },
    {
        timeout: 1000,
        action: function() { jQuery('div').empty(); },
    }
];

function executeSteps(times, index) {
    index = index || 0;
    var task = steps[index];
    if(index > 0 || times > 0) {
        if(index == 0) times--;
        task.action();
        setTimeout(function() { 
            executeSteps(times, (index + 1) % steps.length);
        }, task.timeout);
    }
}

jQuery('input').click(function () { 
    executeSteps(3);
});