如何在JS中交替调用一个函数？

Question

如果有人帮助我，我将非常感激。我是JS中的新手。我尝试多次调用函数作为我的全局变量。我的问题是该函数同时执行。如何使它交替执行？这里是我的代码：

 #general{width:400px;height:400px;margin:0 auto;} 
     .cell{width:50%;height:50%;color:black} 
     .cell:nth-of-type(1){float:left;background: #81E058} 
     .cell:nth-of-type(2){float:right;background: red} 
     .cell:nth-of-type(3){float:left;background: blue} 
     .cell:nth-of-type(4){float:right;background: yellow} 



<div id='generalwrapper'> 
    <div id='general'>     
     <div class='cell' onclick='simon(this.id)'></div> 
     <div class='cell' onclick='simon(this.id)'></div>   
     <div class='cell' onclick='simon(this.id)'></div> 
     <div class='cell' onclick='simon(this.id)'></div>      
</div> 
<div id='buttondiv'> 
    <button onclick='startGame()'>On</button> 
</div> 
</div> 

     var browser=[]; 
     var count=1; 

     function startGame(){ 
      for(var i=0;i<count;i++){ 
       browserturn(); 
      } 
      count++; 
      } 

     function browserturn(){ 
      var x=getNumber(); 
      var element=x.toString(); 
      browser.push(element); 
      var y=document.getElementById(element); 
      y.click(); 
      $(y).delay(100).fadeOut().fadeIn('slow'); 
     } 


     function getNumber(){ 
      var randomNumber=Math.floor((Math.random() * 4)+1); 
      return randomNumber; 
     } 

Answer 1

您应该使用setTimeout延迟一个recursive函数调用。我已经写了下面一个基本的递归函数：

var myDiv = document.getElementById('myDiv'); 
 
var timesToRepeat = 4; 
 

 

 
function myRecursiveFunction(count) { 
 
    myDiv.innerText += " ..." + count; 
 
    count++; //increment count 
 
//this is our exit condition -- otherwise it recurs infinitely!! 
 
    if (count <= timesToRepeat) { 
 
    setTimeout(function() { 
 
//after 600ms, call our function again 
 
     myRecursiveFunction(count); 
 
    }, 600) 
 
    } 
 
} 
 
//our initial call to the function 
 
myRecursiveFunction(1);

<div id="myDiv"> 
 

 
</div>

Answer 2

您需要的时间间隔：

var interval; 
var limit = 1; 
var count = 0; 

更换startGame此：

function startGame() 
    { 
      interval = setInterval(browserturn, 1000); 
      limit++; 
    } 

间隔调用你的函数withi的1000毫秒的时间间隔，并释放控制到渲染器，所以你会看到变化

在browserturn你可以增加耳鼻喉科柜台

 function browserturn(){ 
     var x=getNumber(); 
     var element=x.toString(); 
     browser.push(element); 
     var y=document.getElementById(element); 
     y.click(); 
     $(y).delay(100).fadeOut().fadeIn('slow'); 

     // -------------------------------------- 
     counter++; 
     if(counter < limit) 
     { 
      clearInterval(interval); 
      count = 0; 
     } 
     // -------------------------------------- 
    } 

，并清除间隔，如果计数>限制