Wie kann man eine Funktion mehrmals abwechselnd in JS aufrufen?

Question

Ich werde sehr dankbar sein, wenn jemand mir hilft.Ich bin neu in JS.Ich versuche, eine Funktion so oft wie meine globale Variable is.My Problem ist die Funktion ausgeführt wird gleichzeitig. Wie kann man es abwechselnd ausführen? Hier ist mein Code:

 #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

Sie sollten setTimeout begrenzen verwenden, um einen recursive Funktionsaufruf zu verzögern. Ich habe eine grundlegende rekursive Funktion unten geschrieben:

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

benötigen Sie ein Intervall:

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

ersetzen startGame dafür:

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

Das Intervall ruft Ihre Funktion withi Intervalle von 1000 Millisekunden und gibt die Steuerung an den Renderer, so dass Sie die Änderungen sehen

in browserturn können Sie inkrem ent die Zähler

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

und das Intervall löschen, wenn Zählung>