I need to slow down my code to see some action on screen

Question

I am creating a slot machine and so far it looks like it is working but the for loop moves so quickly I cannot see the images being replaced.

Any ideas on how can I slow down the for loop or any other way to see the images changing on the screen?

    function myFunction() {

        var i;
        var dicepicture;

        var dice = Math.floor(Math.random() * 1000) + 1;


        for (i = 0; i < dice; i++) {

           var k;
           for (k = 1; k < 7; k++) {
           document.getElementById("first-picture" + k).src = 
           'images/empire.jpg';
        }

        var l;
        for (l = 1; l < 7; l++) {
           document.getElementById("first-picture" + l).src = 
           'images/black.jpg';
         }
            var j;

         for (j = 1; j < 7; j++) {

            var dicepicture = Math.floor(Math.random() * 11) + 1;

            document.getElementById("first-picture" + j).src = 
            'images/image' + dicepicture + '.jpg';

            document.getElementById("vari1").innerHTML = "Value of i is: 
            " + i;

             document.getElementById("vari2").innerHTML = "Value of Dice 
             is: " + dice;

             if (j == 1) {
                document.getElementById("first-pic-code").innerHTML = 
                "Code is: " + dicepicture;
                 } else if (j == 2) {
                 document.getElementById("second-pic-code").innerHTML = 
                 "Code is: " + dicepicture;
                  } else if (j == 3) {
                  document.getElementById("third-pic-code").innerHTML = 
                  "Code is: " + dicepicture;
                   } else if (j == 4) {
                   document.getElementById("forth-pic-code").innerHTML = 
                   "Code is: " + dicepicture;
                   } else if (j == 5) {
                    document.getElementById("fifth-pic-code").innerHTML = 
                    "Code is: " + dicepicture;
                     } else if (j == 6) {
                     document.getElementById("sixth-pic-code").innerHTML 
                     = "Code is: " + dicepicture;
                   }
           }

       }
       document.getElementById("vari3").innerHTML = "Value of Dice is: " 
       + dice 
  }

Did you try to add a delay into your code, e.g. as described in https://stackoverflow.com/questions/951021/what-is-the-javascript-version-of-sleep? — Lech Migdal, Dec 30 '18 at 18:51
You used 6 else/if in a row. Allow me to introduce you to the [switch statement](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch) — Nino Filiu, Dec 30 '18 at 18:53
Thanks a lot. I know it looks pretty primitive, I am learning and still a bit afraid to use functions and other statements but I am getting there. — Edson, Dec 31 '18 at 02:40

score 1 · Answer 1 · answered Dec 30 '18 at 18:41

1

USE

         setTimeOut(<timeout_value>) //to delay

answered Dec 30 '18 at 18:41

Himanshu Ahuja

2,849
2
5
25

I need to slow down my code to see some action on screen

1 Answers1