JavaScript 外部ファイルの実行終了を探知するには

Question

JavaScript 外部ファイルの実行終了を探知したいです
下記のやり方でも実行終了探知できますがこれは望んでいません

var script = document.createElement("script");
script.src = "script.js";
script.addEventListener("load", function(){
hello();
});

scriptにaddEventListenerか何かで実行が終了したことを探知
もしくは
for(i=0;i<100;i++){
div.innerHTML+=i+"<br>";
}
alert("実行終了");
のように外部ファイルに動的に差し込むことはできませんでしょうか？
外部ファイルに直書きせず、終了を探知したいです

<script>
window.onload=function(){
var div = document.createElement("div");
div.id="div";
document.body.appendChild(div);
var script = document.createElement("script");
script.src = "script.js";
script.addEventListener("load", function(){
hello();
});
document.body.appendChild(script);
}
function src_end(){
alert("実行終了");
}
</script>

script.js

function hello(){
for(i=0;i<100;i++){
div.innerHTML+=i+"<br>";
}
//src_end();と書けば済む話ですがscript.jsには何も記述しないこと前提
}

Comments

[int32_t]

対象の<script>は動的に追加する前提ですか? HTMLに最初から書かれていることはないですか?

[退会済みユーザー]

動的追加前提です

[退会済みユーザー]

これを考えたのですが

<script>
window.onload=function(){
var div = document.createElement("div");
div.id="div";
document.body.appendChild(div);
var script = document.createElement("script");
script.src = "script.js";
script.addEventListener("load", function(){
hello();
});
script.addEventListener("DOMContentLoaded", function(){
src_end();
});
document.body.appendChild(script);
}
function src_end(){
alert("end");
}
</script>

これが正しく成り立ってるのか、わかりません
DOMContentLoadedはscript.jsのスクリプトの実行が完了されてから呼び出されてると考えていいのでしょうか？

[ku__ra__ge]

「外部ファイルの実行終了」とは何かを明確に提示してください。
外部ファイルのロードが終了したときではないというのは質問から分かりますが、では具体的に何が起きたときを検知したいのかが分かりません。

[退会済みユーザー]

function hello(){
for(i=0;i<100;i++){
div.innerHTML+=i+"<br>";
}
}
が終了した時点でsrc_end()を実行したいのです
これを外部ファイルに記述することなく。

[ku__ra__ge]

単純に考えれば呼び出すとき、
hello();
src_end();
……って書けばいい気がしますが、それじゃ駄目なんですか？

[退会済みユーザー]

hello();の実行が完了したことを明確に探知して実行したいのでそれはダメです

[maisumakun]

「呼び出されるファイルの方に完了を伝える処理を書く」といくのがいちばん確実なのですが、その方法を取れない・取りたくない理由は何なのでしょうか？

[退会済みユーザー]

ファイルの数が多くなってくると全てに記述するのが面倒だからです

[maisumakun]

> ファイルの数が多くなってくると全てに記述するのが面倒だからです

ファイルごとにロジックが違えば、終了を検知する処理もそれぞれに違いえます。

「終了時にする処理を分離したファイルの側から呼び出す」という形で共通化するほうが、ファイルごとに「終了を検知する処理」を考える必要をなくなるので書きやすいのではないかと考えます。

Answer 1

動的インポートはいかがでしょうか。

  <script type="module">
    import('./script.js')
      .then(() => {
        alert('end')
      });
  </script>

// script.js
const sleep = time => new Promise(resolve => setTimeout(resolve, time));

for (let i = 0; i < 100; i++) {
    document.body.innerHTML += i + "<br>";
    await sleep(100);
}

もし、モジュールが非同期処理をしてる場合は上手くいかないと思います。

Answer 2

あらゆるケースに使える一般的な方法はないと思います。

外部スクリプトの最後にコードを動的に差し込むのは可能だと思いますが、例に挙げられているように外部スクリプトで定義された関数の終了時に実行されるようにコードを差し込むのはほぼムリです。

// ここに本来のコード

src_end(); // ここに差し込むのは可能

function hello() {
  // ここに本来のコード

  src_end();
  // 関数の終了時点のために差し込むのはほぼムリ。
  // 途中で return しているかもしれないし、この関数は
  // このファイル内の他の関数から呼ばれているかもしれない。
  // 非同期な処理をどうするかも考慮する必要あり。
}

---

「なぜ終了を検知したいのか」がわかれば、yambejpさんの回答のように別の手段があるかもしれません。

Answer 3

MutationObserverで処理してみては？

window.addEventListener('DOMContentLoaded', ()=>{
  var mo = new MutationObserver(function(r){
    r.forEach(x=>{
      x.addedNodes.forEach(y=>{
        if(y.nodeName=="SCRIPT"){
          y.addEventListener('load',()=>{
            console.log(y.nodeName);
          });
        }
      });
    });
  });
  const opt = {
  childList: true,
  };
  mo.observe(document.body, opt);
  var script = document.createElement("script");
  script.src = "sample1.js";
  document.body.appendChild(script);
  var script = document.createElement("script");
  script.src = "sample2.js";
  document.body.appendChild(script);
});