Javascriptでの実行をどのように遅延させるのですか？

Question

私はここに尋ねる前にこの多くの時間を解決する方法を探していると誓っていますが、いくつかのコードを見つけましたが、何が必要なのかはまだまだありません。ランダムなスタイル...ボタンをクリックすると、次のコードが開始されます。

function roll(){ 
    for (i = 0; i < 4; i++) { 
     setInterval(function(){ 
     res = Math.floor(Math.random() * 10) + 1; 
     /*document.getElementById("slot-" + res).style.border = "5px solid red"; 
     document.getElementById("slot-" + res).style.color = "red";*/ 
     document.getElementById("slot-" + res).className = "col-sm-2 slot-active"; 
     }, 500); 
     document.getElementById("slot-" + res).className = "col-sm-2 slot"; 
    } 
}; 

それはループの後の行で、私はそれはの外観を与えるように、元の框を置くふりそのボックスに1と10と変更スタイルクラスの間でランダムに選択し...そう...無作為な選択...しかし、私はinmediの中で実行し、何も起こっていないように見えるforループの中に入れれば実行しません...私はJavascriptのnoobと私はこれを学ぶために練習しようとしています！あなたの助けに！...

Answer 1

setTimeout（function（）{dosomething}、timeout）、btwを使うことができます。関数が実際に実行されているかどうかを確認するためにconsole.log（ 'something'）を追加してください。

btw。インターバルを使用している場合は、forverを実行したくない場合はキャンセルする必要があるかもしれないことを覚えておいてください。また、処理をいつ行うかについての条件付きで反復関数（自身を呼び出す関数）を使うこともできます。

btw2。あなたがそれを取り消すことができるように、あなたが間隔を作成するたびにそれをいくつかの変数または何かに割り当ててください！

Answer 2

あなたがランダムに選択されたクラスを設定しますするsetIntervalを作成し、このように言った区間の実行、何かを終了するのsetTimeoutを持つことができます。https://jsfiddle.net/canastro/xxdbjm4n/1/

const refreshIntervalId = setInterval(() => { 
    $('.selected').removeClass('selected'); 
    const res = Math.floor(Math.random() * 10) + 1; 
    $(`.slot-${res}`).addClass('selected'); 
}, 500) 

setTimeout(() => { 
    clearInterval(refreshIntervalId); 
}, 3000); 

Answer 3

あなたの答えはthis.you必要性のようにする必要がありますjavascript変数のスコープを参照してください。

function roll(){ 
 
    
 
    for (i = 0; i < 4; i++) { 
 
     var res = Math.floor(Math.random() * 10) + 1; 
 
     function active(res){ 
 
     setTimeout(function(){ 
 
     document.getElementById("slot-" + res).className = "col-sm-2 slot-active"; 
 
     }, 500); 
 
     document.getElementById("slot-" + res).className = "col-sm-2 slot"; 
 
     } 
 
     active(res); 
 
    } 
 
};

div{ 
 
width:50px; 
 
height:50px; 
 
background:#ccc; 
 
float:left; 
 
margin:5px; 
 
} 
 
.slot{ 
 
background:#0f0; 
 
} 
 
.slot-active{ 
 
background:#f00; 
 
}

<button onclick="roll()" style="display:block;">roll</button> 
 
<div id="slot-1"></div> 
 
<div id="slot-2"></div> 
 
<div id="slot-3"></div> 
 
<div id="slot-4"></div> 
 
<div id="slot-5"></div> 
 
<div id="slot-6"></div> 
 
<div id="slot-7"></div> 
 
<div id="slot-8"></div> 
 
<div id="slot-9"></div> 
 
<div id="slot-10"></div>