Javascript，在一个函数中设置事件之间的超时

Question

假设我在一个循环中有一个函数，它会一遍又一遍地交替显示两种不同类型的文本。

现在我想要实现的是延迟显示不同的文本，比方说 1 秒。所以它会打印第一个文本，然后在 1 秒后打印第二个文本，依此类推，直到循环结束。我试图使用 setTimeout 和 setInterval 但我无法让它工作。

var a = "hey ";
var b = "ho ";

function test(a,b){
  document.getElementById('id').innerHTML += a;
  document.getElementById('id').innerHTML += b;
 }

for(var i = 0; i < 10; i++){
 setInterval(test(a,b), 1000);
}

<div id="id">

</div>

Answer 1

需要使用setTimeout引入delay而不是setInterval。
超时应按递增顺序进行，因此请将其乘以 i
test(a,b) 应该在函数的回调中，以便 setTimeout 可以根据延迟执行它。如果你直接写 test(a,b) 那么它会立即执行，没有任何延迟。

var a = "hey ";
var b = "ho ";

function test(a,b){
  document.getElementById('id').innerHTML += a;
  setTimeout(function(){
     document.getElementById('id').innerHTML += b;
  }, 500)
 }

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

<div id="id">

</div>

更新

document.getElementById('id')

之间的延迟

Answer 2

您可以使用 setInterval 并跟踪使用变量完成了多少次：

var count = 0; //Variable to keep track of the number of setInterval called
var text = ['text1','text2'];

var interval = setInterval(() => {
  if(count == 10) clearInterval(interval); //Stop the setInterval when you reach the 10th time
  document.getElementById('test').innerHTML = count % 2 == 0 ? text[0] : text[1];
  count++; //Increment your var
},1000);

<div id="test"></div>

Answer 3

您可以为此使用 "asynchonous" 循环，即在超时后调用自身的函数。然后使用模运算符来决定是否显示 a 或 b:

var a = "hey ";
var b = "ho ";

function test(c){
    document.getElementById('id').innerHTML += c;
}

(function loop(i){
    if (i >= 10) return; // All done
    test(i%2 ? b : a); // choose which one to show
    setTimeout(loop.bind(null, i+1), 1000); // Repeat with delay and incremented i.
})(0); // Start the loop immediately with i=0

<div id="id">

</div>

Answer 4

function loop(i, limit) {  
  if (i < limit) {
    console.log('Text 1');
    setTimeout(function() {
      console.log('Text 2');      
      setTimeout(function() {
        loop(++i,limit);
      },1000);
    },1000);
  }
}

loop(0,3);

Answer 5

您需要稍微更改代码以在每个代码之间引入延迟。

代码如下：

将可能的值存储在数组中
有一个方法可以从值

display

i

有一个 run 方法用于启动循环，并且还延迟（1 秒）召回并增加了一个计数器

var values = ["hey","ho"];
var index = 0;

function display(i){
  document.getElementById('id').innerHTML = values[i];
}

function run(){
    display(index%values.length)
    if(++index<10){
      setTimeout(run,1000);
    }
}

run();

<div id="id">

</div>

Answer 6

如果您还想要 'hey' 和 'ho' 之间的超时，则不应将它们都保留在 test 中，而是只保留一个并更改参数值。

var a = "hey ";
var b = "ho ";

function test(a){
  document.getElementById('id').innerHTML += a;
 }

for(var i = 0; i < 10; i++){
 (function(i) {
   setTimeout(function(){
    test(i % 2 === 0 ? a : b);
   }, i*1000);
 }(i))
}

<div id="id">

</div>

Javascript，在一个函数中设置事件之间的超时

Javascript, setting timeout between events in one function

javascript

timing