html - 我需要放慢我的代码才能在屏幕上看到一些动作

Question

我正在创建一台老虎机，到目前为止它看起来正在工作，但是 for 循环移动得如此之快，我看不到被替换的图像。

关于如何减慢 for 循环或以任何其他方式查看屏幕上图像变化的任何想法？

    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 
  }

标签： htmlloopsfor-loop

Answer 1

利用

         setTimeOut(<timeout_value>) //to delay