clearInterval()での謎

Question

function()内のsetInterval()内にfetch()があり、function()外に条件clearInterval()を用意。
１回、function()を呼び出しそのまま条件clearInterval()を実行した場合はsetInterval()はしっかり停止しているが、
２回以上連続で、function()を呼び出し条件clearInterval()を実行した場合は１回目のsetInterval()は停止するが、２回目以降のsetInterval()は
chrome dev tool networkを見るとfunction()の呼び出し回数に連動してsetInterval()も重複していいて、１回目以降のsetInterval()の非停止を確認。
何故、変数名が同じなのにclearInterval()されないのか？、またどういった実行になっているのか？
がわかりません。
＊補足＊setInterval()内のfetch()の実行目的はリアルタイム（為替レートの様な）、秒単位で更新、
innerTextで上書きを行いたい為使用しています。

<div id='start'></div>
<div id='stop'></div>

var STOP;
function a(){
    STOP = setInterval( async ()=>{
    var API = await fetch().then(res => res.json());
    console.log(API)},1000);
}
window.addEventListener('click',(e)=>{
    if(e.target.id === 'start'){ a();}
    else if(e.target.id === 'stop'){ clearInterval(STOP);}
});

このコードでこの現象は仕方ないという場合、
setInterval()内fetch()をせずとも１秒間隔（ほぼリアルタイム）でfetchを更新できる方法があるならばご教授いただけると幸いです。
よろしくお願いいたします。

Comments

[maisumakun]

a()を複数回呼び出した場合の「意図する挙動」はどのようなものですか？

[syosinsyascript]

setInterval()の完全（全ての）停止になります。
説明、詳細の不足で申し訳ありません。

Answer 1

なにをしたいかわかりませんがsetIntevalの二重起動を防ぎたいなら
setIntervalする前にclearIntevalしておくのが定石

function a(){
  STOP = setInterval( async ()=>{
    var API = await fetch('sample.json').then(res => res.json());
    console.log(API);
  },1000);
}

複数起動がしたくて起動した順に停止したいならpush/shiftすればよいでしょう

var STOP=[];
function a(){
  STOP.push(setInterval( async ()=>{
    var API = await fetch('sample.json').then(res => res.json());
    console.log(API);
  },1000));
}
window.addEventListener('click',(e)=>{
    if(e.target.id === 'start'){
      a();
    }else if(e.target.id === 'stop'){
      clearInterval(STOP.shift());
    }
});

起動順ではなく、後から起動したものを先に停止したいならshiftをpopにしてください

Comments

[syosinsyascript]

回答ありがとうございます。
説明や実行理由などの記載がなく申し訳ありません。
ご教授頂いたsetInterval()前にclearInterval()を実行してみて、複数起動にならずclearInterval()で期待通りの停止ができました。ありがとうございます。
var STOP が空の状態で実行の前に置くのは盲点でした。基礎からもう一度勉強してきます。
差支えなければ再度ご教授頂きたいのですが、変数が同じ（STOP）を複数起動しているのはどういった状態？なのでしょうか？また、変数が同じ（STOP）をclearInterval(STOP)が全てに実行出来ないのは？
状態把握ができていないため、説明頂けると幸いです。

[yambejp]

> 変数が同じ（STOP）を複数起動している

うまく伝わってなくて申し訳ありません。
変数としてSTOPを利用する場合はsetIntervalで返るidを常に上書きします。
上書きされる前にclearIntervalしましょうというのが前者の回答です

後半部分は複数回起動するなら配列で受けましょうというものです

[syosinsyascript]

> うまく伝わってなくて

こちらこそ申し訳ないです。理解不足で、
丁寧に説明頂きありがとうございました。