JavaScript for限定 何かいループさせるかわからない状況下で任意のタイミングで抜けたい

Question

前提・実現したいこと

タイトルの通りです
何回ループさせるわからない状況下でループを抜けるボタンを押すと
ループから抜けられるようにするにはどうしたらいいでしょうか？

該当のソースコード

<script>
var break_f=0;
window.onload=function(){
for(i=0;i<2000;i++){
img=document.createElement("img");
img.src="https://blogs.gartner.com/ted-chamberlin/files/2018/07/free.jpg?"+new Date().getTime();
img.addEventListener('load', function() {
console.log("loading"+i);
});
if(break_f==1){
break;
alert("break");
}
document.body.appendChild(img);
}
}
</script>

<input type="button" value="抜ける" onclick="break_f=1">

Comments

[int32_t]

1つ目の画像のロード可否がわかってから次の画像をロードしたい感じでしょうか?
その場合、ロード成功しても失敗しても次の画像のロードを始めたいですか?

Answer 1

関数全体をasyncにして、forの途中にawaitを入れてみてください。

ふつうのブラウザJavaScriptはシングルスレッドなので、単純にforでループさせると、その間はループしているコードがすべての実行時間を占拠してしまいます。ボタンを押したことも検知できなくなります。

Answer 2

setIntervalで回しフラグで管理してclearIntervalする
ボタンを押したときにフラグを立てればとまります

sample

<script>
let flg=false;
let i=0;
const max=10;

window.addEventListener('DOMContentLoaded', ()=>{
  let timerID=setInterval(()=>{
    if(flg){
      console.log("break");
      clearInterval(timerID);
      return false;
    }
    i++;
    console.log(i);
    if(i>=max){
      console.log("max");
      clearInterval(timerID);
    }
  },100);
});
</script>

<input type="button" value="抜ける" onclick="flg=true">