JavaScript XMLHttpRequestの衝突を無くしたい

Question

前提・実現したいこと

xxx()とxxxx()を同時に発生させています
両方ともxmlhttp = new XMLHttpRequest();と定義していますので衝突が起こります
xmlhttpを別の変数名にすればいいだけですが、
同じ変数名を使いながら、同時に各関数内で動かすにはどういう書き方をしたらいいでしょうか

前提条件として
同じ変数名であること
それぞれの関数に分けて仕様することです

1つの関数にまとめて、呼び出すやり方ではありません。

該当のソースコード

<script>
function xxx(){
var formdata = new FormData();
formdata.append("data1","data1");
xmlhttp = new XMLHttpRequest();
xmlhttp.overrideMimeType("text/plain; charset=utf-8");
xmlhttp.addEventListener('loadend', function(){
if(xmlhttp.status === 200){
}
});
xmlhttp.open("POST", ".", true);
xmlhttp.send(formdata);
}
setInterval("xxx()",1000);



function xxxx(){
var formdata = new FormData();
formdata.append("data2","data2");
xmlhttp = new XMLHttpRequest();
xmlhttp.overrideMimeType("text/plain; charset=utf-8");
xmlhttp.addEventListener('loadend', function(){
if(xmlhttp.status === 200){
}
});
xmlhttp.open("POST", ".", true);
xmlhttp.send(formdata);
}
setInterval("xxxx()",1000);
</script>

Comments

[maisumakun]

なぜ同じ変数名にしなければならないのでしょうか？

[waaaz]

上記サンプルは２つですが、もっと複数使いたい場合に
それぞれにxmlhttpの変数名を設定するのが手間、という理由からです
回答に記載したコードで問題ありませんでしょうか？

Answer 1

変数xmlhttpは別の関数内にあるので、var, let, const のいずれでも目的は達します。どれもついていないと変数はグローバルとなり、変数名の衝突が発生します。varだと関数が違えば別の変数、letとconstはブロックが違えば別の変数です。
いずれでも良い場合は const が推奨されているので、良さにこだわるなら constで宣言するのがよいでしょう。

const xmlhttp = new XMLHttpRequest();

とにかく動けばよいのであれば、varでも変数の衝突は起きません。

var xmlhttp = new XMLHttpRequest();

Comments

[waaaz]

失礼しました
xmlhttp = new XMLHttpRequest();
varを付けてませんでした
付けたところvarでも衝突は起きず安定しました

[ockeghem]

長いし読みにくいので別の質問にしてください。それに②はどこにありますか?
varやletは全ての変数につけないと意図しない結果になりますよ。さしたあり、①はxmlhttp = にvarがついているべきでは?

[waaaz]

訂正いたします
varで無事動きました
ありがとうございます

Answer 2

変数宣言の時にletつけるとかどうでしょう。

let

let 文はブロックスコープのローカル変数を宣言します。任意で値を代入して初期化できます。

スコープが違えば別の変数として認識されます。

Comments

[waaaz]

こういうことでしょうか？

<script>
function xxx(){
let formdata = new FormData();
formdata.append("data1","data1");
let xmlhttp = new XMLHttpRequest();
xmlhttp.overrideMimeType("text/plain; charset=utf-8");
xmlhttp.addEventListener('loadend', function(){
if(xmlhttp.status === 200){
}
});
xmlhttp.open("POST", ".", true);
xmlhttp.send(formdata);
}
setInterval("xxx()",1000);

function xxxx(){
let formdata = new FormData();
formdata.append("data2","data2");
let xmlhttp = new XMLHttpRequest();
xmlhttp.overrideMimeType("text/plain; charset=utf-8");
xmlhttp.addEventListener('loadend', function(){
if(xmlhttp.status === 200){
}
});
xmlhttp.open("POST", ".", true);
xmlhttp.send(formdata);
}
setInterval("xxxx()",1000);
</script>

[m.ts10806]

はい。ですがそもそも「衝突」とは具体的にどんな問題が起きてたのでしょう。

[waaaz]

varで宣言した場合、
xxx()とxxxx()に設定してあるif(xmlhttp.status === 200)の部分が、
両方ともxxx()とxxxx()の片側に反応しているような気がするのです

[waaaz]

letにしたところ問題は起きませんでしたがvarですと何かしら問題が起きています

[waaaz]

訂正いたします
varで無事動きました
ありがとうございます

[m.ts10806]

「気がする」ではなくデバッグなどして現象を確実に把握することからです。