JavaScript setTimeout

Question

setTimeoutを停止させるための変数が全て同一だとして、一括停止させる方法はないでしょうか？
下記でいったら5の出力以降はsetTimeoutのキャンセルを行いたいです

前提条件としてはtimerID=setTimeoutは同じ変素名での宣言となります
必ず10回setTimeoutの予約(実行処理)を入れることです
if(i==5||i==6||i==7||i==8||i==9||i==10){
clearTimeout(timerID);
}
このような形は望んでいません

現在いくつ予約されているsetTimeoutがあるかわからない条件下で
timerIDで登録されたsetTimeoutを全て停止させたい

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>

<script>
window.onload=function(){
div=document.querySelectorAll('div');
for(let i=0;i<div.length;i++){
timerID=setTimeout(function(){
console.log(div[i].innerText);
},i*1000);
if(i==5){
clearTimeout(timerID);//6だけ止まる 1 2 3 4 5 7 8 9 10と続く
}
}
}
</script>

Comments

[itagagaki]

10個あるなら10個のidを管理しないとダメでしょう。

[qtyuty]

この場合どうやって動的にIDを宣言するのでしょうか？

[m.ts10806]

ご自身で書かれてる
div[i]
の考え方そのまま使えるのでは

[itagagaki]

単純に timerID[i] = じゃダメですかね？

[qtyuty]

どうもありがとうございます

一応これで望んだ形になりました
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>

<script>
window.onload=function(){
timerID=[];
div=document.querySelectorAll('div');
for(let i=0;i<div.length;i++){
timerID[i]=setTimeout(function(){
console.log(div[i].innerText);
},i*1000);
if(i>5){
for(let j=5;j<10;j++){
clearTimeout(timerID[j]);
}
}
}
}
</script>

[qtyuty]

divの数がいくつかあるかわからない状況下だとどうやって判断し、停止させたらいいでしょうか
下記では動きません

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
・・・いくつ続くかは不確定

<script>
window.onload=function(){
timerID=[];
div=document.querySelectorAll('div');
for(let i=0;i<div.length;i++){
timerID[i]=setTimeout(function(){
console.log(div[i].innerText);
},i*1000);
if(i>5){
for(let j=0;j<10000;j++){
if(timerID[j]){
clearTimeout(timerID[j]);
}
}
}
}
}
</script>

[maisumakun]

> 下記では動きません

どうなるのですか？わかった情報は「動く/動かない」の1ビットだけではないと思います。

[itagagaki]

数は div.length でわかっているのだから、
j<10000 は j < div.length とすればいいのでは。たぶん。

動かないのは if(i>5) が原因でしょうね。ちょっと本来判定したい条件がわからないのでなんとも言えませんが、考え直してみてくいださい。

[qtyuty]

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>

<script>
window.onload=function(){
timerID=[];
div=document.querySelectorAll('div');
for(let i=0;i<=div.length;i++){
timerID[i]=setTimeout(function(){
console.log(div[i].innerText);
if(i>=5){
for(let j=0;j<=div.length;j++){
if (timerID[j]) {
clearTimeout(timerID[j]);
}
}
}
},i*1000);
}
}
</script>

[Zuishin]

この質問者は大便の臭いを計測する言語を何度も聞く大量アカウント保持者。

Answer 1

    if(i==5){
      clearTimeout(timerID);
      break;
    }