JavaScript递归延迟方法调用

Question

我想写一个简单的函数，每秒更新一个段落元素<p></p>与模式中的新文本，但我不确定如何去推迟方法调用这是我试过的解决方案但它似乎并不奏效。如果你删除了setTimeout方法并用一个简单的递归调用来替换它，那么函数会按照它应该打印的模式打印出来，但是不会按照我想要的延迟打印出来。

function printPattern(eventSource, width, height, counter){ 
    if(height == 1 && counter >= width) { 
     return; 
    } 
    else{ 
     if(counter >= width){ 
      eventSource.innerHTML += "<br>"; 
      //printPattern(eventSource,width,height-1,0); 
      setTimeout(printPattern(eventSource,width,height-1,0), 1000) 
     } 
     else{ 
      if((counter%2 == 0)^(height%2 == 1)){ 
       eventSource.innerHTML += "O"; 
      } 
      else{ 
       eventSource.innerHTML += "X"; 
      } 
      //printPattern(eventSource,width,height,counter+1); 
      setTimeout(printPattern(eventSource,width,height,counter+1), 1000) 
     } 
    } 
} 

function displayPattern(source){ 
    printPattern(source, 4, 4, 0); 
} 

Answer 1

你传入呼叫printPattern到setTimeout，而不是传递函数本身的结果。你想要：

setTimeout(function() { 
    printPattern(eventSource, width, height, counter+1); 
}, 1000);