javascript - looping through array content with a delay -

this jquery/ javascript problem. have array contains button numbers , outputs buttons onto button result in button being clicked. problem buttons clicked @ once if run loop. instead want output numbers delay buttons pressed after 1 second delay.

here link simon game project: https://codepen.io/roger1891/full/vmyqwx/

the problem visible after following 1st button. after that, computer press next 2 buttons @ same time instead of pressing them separately after 1 sec delay.

the problem located in loop located in myloop() function:

sequencearray.foreach(function(item, index, array){   //click button getting last index of array   //$("#btn-"+array[array.length-1]).click();   $("#btn-"+array[index]).click();     console.log(array); });  

this full code:

 //associating buttons sound   var soundbutton = function(buttonid, soundid) {     $("#" + buttonid).click(function(){     $("#" + soundid).get(0).play();       $("#" + buttonid).css("opacity", "0.5");     settimeout( function(){       $("#" + buttonid).css("opacity", "1");     },500);     if(currentplayerturn == "human") {        var $input = $(this);        var attrstring = $input.attr("id");        //only number id attribute        var strnum = attrstring.replace( /^\d+/g, '');        //convert thenumber string number        var thenum = parseint(strnum);        playerarray.push(thenum);        console.log(thenum);        console.log(playerarray);     }   });     };    function myloop() {      setinterval( function(){       if(gamewon == false && ongoinggame == true && currentplayerturn == "computer" && score < 5) {          //increment score           score++;           //append score id         $("#score").empty().append(score);        //create random number         randomnumber = math.floor((math.random()*4) + 1);         //push random number array         sequencearray.push(randomnumber);         //loop through array          sequencearray.foreach(function(item, index, array){         //click button getting last index of array         //$("#btn-"+array[array.length-1]).click();         $("#btn-"+array[index]).click();           console.log(array);         });            currentround = sequencearray.length;         ongoinggame = false;         currentplayerturn = "human";       }          if(currentplayerturn == "human") {         var is_same = playerarray.length == sequencearray.length && playerarray.every(function(element, index) {           return element === sequencearray[index];          });         is_same;         console.log(is_same);         if(is_same == true) {           playerarray = [];           ongoinggame = true;           currentplayerturn = "computer";         }       }       },1000);    }   myloop();  

thank in advance help.

since want trigger buttons 1 one, settimeout() should inside loop. mindful of index, since async.

sequencearray.foreach(function(item, index, array) {     // set timeout each second 1 button gets clicked     settimeout( (function( index ) {         // use closure here our index values stay correct.         return function() {             $("#btn-"+array[index]).click();          };     }( index )), (1000 * index) ); });   

edit: replaced fixed 1000ms delay delay * index