html 画面描画とJSの処理が終わってから処理を開始したい

前提・実現したいこと

現在、お知らせ通知ができるwebアプリを作成しています。
RSSやAtomフィードから最新情報をもらってきて、新規の記事がある場合に、通知アイコンに未読件数が表示されるようにしたいと考えています。

ページが表示されるときに一緒に未読件数用のアイコンを表示したいのですが、フィードから最新情報を取得する部分でAjaxを用いているので、
非同期処理のため、うまくいきません。

外部ライブラリである、JQueryなどは仕様上使用できません。

当たり前ですが、ページが表示されてから、ボタンなどで再描画した際には未読通知アイコンは表示されています。
理想はページ表示と同時に未読通知アイコンを表示です。

Ajaxなどの非同期処理が完了した、というイベントなどを発行できれば楽なのですが、そういったものはありますでしょうか？

最終的な目標

Typescriptで書いている、Ajaxの処理が全て終わってからhtml内のjavascriptで未読アイコン表示の処理を行いたいです。
UI(html)とコア部分(Typescript)はUIだけコアに依存させる形にしたいです。

該当のソースコード

該当箇所のみ抜き出しています。
定義されてない変数などありますが、実際には定義してある体で記入してます。

html
1<!DOCTYPE html>
2<html>
3<head>
4<title>Page Title</title>
5<script type="text/javascript" src="../dist/index.umd.js"></script>        
6<script type="text/javascript" src="mdi.js"></script>
7<link rel="stylesheet" type="text/css" href="../dist/index.css">
8
9<script  type="text/javascript">
10	function initialize() {        
11		var notice = new Notice();
12
13		notice.addFeed("https://www.j-cast.com/tv/atom.xml");
14		
15		notice.loadInformations();
16
17		var noticeIcon = new NoticeIconButton(notice);
18		var body = document.getElementsByTagName("BODY")[0];
19        //ベルアイコン描画
20		body.appendChild(noticeIcon.render(mdiBellOutline));
21
22　　　　 //未読アイコン描画
23		body.appendChild(noticeIcon.renderNotice());
24		
25	}
26</script>
27
28</head>
29<body onload="initialize()">
30
31</body>
32</html>

Typescript
1Notice.ts
2
3loadInformations() {
4        var count=0
5        //最新情報を取得する
6        this.getLatestInformation(this._feeds[count], count, this._userId, this);
7
8        return true;
9    }
10
11private  getLatestInformation(feedURL:string, count:number, userId:string, notice:Notice){
12        var domParser = new DOMParser();
13
14        new noticeDB = new NoticeDB();
15        //データベースを作成する
16        noticeDB.dbCreate(this._dbName, this._storeName);
17
18        var xhr = new XMLHttpRequest();
19        xhr.open('GET',feedURL);
20        xhr.send();
21
22        xhr.onreadystatechange = function() {
23
24            if(xhr.readyState === 4 && xhr.status === 200){
25                var feed_items:HTMLCollectionOf<Element>;
26
27                if(typeof(xhr.response) === 'string'){
28
29                    try{
30
31                        var feed_data:Document = domParser.parseFromString(xhr.response, "text/html");
32                        feed_items = feed_data.getElementsByTagName(notice._itemTag);                 
33 
34                            
35                        }
36                    }catch{
37                        console.log('error');
38                    }
39                }
40            }
41        }
42
43    }

回答3件

ベストアンサー

質問の意味を理解できてるか不安ですがデータのロード後に処理を開始したいのであればコールバックを渡せばいいんじゃないでしょうか。

javascript
1notice.loadInformations(function() {
2  var noticeIcon = new NoticeIconButton(notice);
3  var body = document.getElementsByTagName("BODY")[0];
4  //ベルアイコン描画
5  body.appendChild(noticeIcon.render(mdiBellOutline));
6
7  //未読アイコン描画
8  body.appendChild(noticeIcon.renderNotice());
9});

loadInformations(callback) {
  this.getLatestInformation(..., callback);
(...)
private  getLatestInformation(..., callback) {
  // 何か色々やったあとにコールバックを呼ぶ
  callback();

投稿2020/03/11 01:14

kodai

総合スコア759

回答へのコメント

poppoas

2020/03/11 01:38

質問文がわかりにくくて申し訳ありません。恐らくkodaiさんが理解されている内容で会っていると思います。まさしく自分が求めていた答えでした。 loadInformationでコールバックを渡すのは考えていませんでした。とても参考になりました。ありがとうございます。

処理の後に.then(function()){}とつなげるのはいかがでしょうか。
シンプルに見やすく書けるかと思います。

参考サイト

投稿2020/03/10 23:44

tmp-user

総合スコア44

以下のどれかですね。
0. Promiseを使ってthenチェーンで非同期処理をする
0. Promiseを使ってawait/asyncで非同期処理をする
0. 普通にonreadystatechangeの最後に描画処理をする
0. そもそもXMLHttpRequestは古い。fetchを使う

あと個人的にAjaxはonreadystatechangeよりもonload/onerrorで書いたほうが完結でわかりやすいのと、イベント登録してからsendするという順番の方が安心感がありますね。

#####追記
コアと分離したいということならやはりイベント処理がいいんじゃないでしょうか。
カスタムイベント作ってwindowに付けるか、postMessageすればいいと思います。
あとsendの順番については、非同期処理開始→イベント登録だと万が一イベントを登録するプロセスが終了する前にレスポンスが返ってしまった場合に困るって感じです。処理にかかる時間の差で結果的に正しく動作しますが言語的に動作順が保証されるわけではないので。

投稿2020/03/10 15:13

編集2020/03/11 01:29

kairi003

総合スコア1245

回答へのコメント

poppoas

2020/03/11 00:08

>Promiseを使ってthenチェーンで非同期処理をする >Promiseを使ってawait/asyncで非同期処理をする非同期処理だとやはりPromiseを使うのが、一般的ですよね。しかしながら、今回はUIの部分(html)とコアの部分(Typescript)は別で実装かつUIだけがコアに依存する形（コア部分は独立していて、UIは自由に変更）を作りたいと考えております。 >普通にonreadystatechangeの最後に描画処理をするこれだとUI部分とコア部分をわけた意味がなくなるのでできないですね。 >そもそもXMLHttpRequestは古い。fetchを使う fetchはIEだと互換がないので使えません。 >あと個人的にAjaxはonreadystatechangeよりもonload/onerrorで書いたほうが完結でわかりやすいのと、イベント登録してからsendするという順番の方が安心感がありますね。イベント登録してからsendする安心感とはなんですか？単純にコードの可読性の話ですか？処理的になにか変わることがあるのでしょうか？

15分調べてもわからないことは
teratailで質問しよう！