※前回質問したのですが、onloadイベントについて理解したいと思い質問させていただいてます。

【やりたいこと】
a.js　→　b.jsの順番で処理を行いたいです。

a.js内には非同期処理が（setTime～）が存在し、b.jsにはonloadイベントのみ存在します。
a.jsの処理がすべて完了（非同期処理含め）してから、b.jsのonloadイベント内の処理を実行したいです。
b.jsでsetTime～で実行を遅らせれば、a.jsの処理がすべて完了してから、b.jsの処理を行うことができることは確認したのですが、
他に方法がないか模索しています。

【質問】
onloadイベントは、「ページ読み込み完了後、すなわちDOMツリー構築、<img>タグによる画像ファイルの外部リソースのロードなどすべて完了した時点でスクリプトが実行される。」と書いてありました。
上記が正しく理解できてないのですが、ここでいうDOMツリー構築や外部リソースのロードなどすべて完了の内に、javaScriptの読み込みは含まれないのでしょうか。
onloadイベントの実行タイミングについて詳しく教えていただきたいです。

【参考ソース】

【xxx.jsp】 
<head>
<script src "b.js" defer></script>
</head>
<body>
<script src "a.js" defer></script>

【a.js】 
(function (win, doc, $, util) {
～コード
（アコーディオンを作成したりいろいろ行っている。setTime～など非同期処理も存在）

【b.js】 
$(windows).on('load', function(){
 windows.scrollTo(0, target.offset().top);
});

行動規範の内容に同意します

回答2件

上記が正しく理解できてないのですが、ここでいうDOMツリー構築や外部リソースのロードなどすべて完了の内に、javaScriptの読み込みは含まれないのでしょうか。

含まれますが、setTimeoutの実行は読み込み後の話となりますので、onloadには無関係です。

a.jsの中から、処理完了のタイミングでloadではない自前のイベントをtriggerして、それをb.jsで拾う、という形にしてはどうでしょうか。

投稿2019/07/31 23:13

maisumakun

総合スコア145184

ベストアンサー

順番を逆転したいのに最初の方でonload処理を入れているのはロジックが
おかしいのでは？

a/bをそれぞれpromiseを返す関数にしておき
b.jsのonloadをやめて、onloadの中でa,bの処理をすればよいでしょう

sample

aは2秒後に"a"と表示、bは1秒後に"b"と表示

a.js

javascript
1const func_a=()=>{
2  return new Promise(resolve=>{
3    setTimeout(()=>{
4      console.log("a");
5      resolve();
6    },2000);
7  });
8};

b.js

javascript
1const func_b=()=>{
2  return new Promise(resolve=>{
3    setTimeout(()=>{
4      console.log("b");
5      resolve();
6    },1000);
7  });
8};

これをb→a順で組み込むが、実行はwindowのDOMContentLoadedをまって
a→b順に指定する

javascript
1<script src="b.js"></script>
2<script src="a.js"></script>
3<script>
4window.addEventListener('DOMContentLoaded', ()=>{
5  (async()=>{
6    await func_a();
7    await func_b();
8    console.log("end");
9  })();
10});
11</script>
12
13