今、こちらのサイトの 同期と非同期の混在の問題を読んでいます。
そこでこのようなことが書いてありました。

javascript
1function onReady(fn) {
2    var readyState = document.readyState;
3    if (readyState === 'interactive' || readyState === 'complete') {
4        fn();
5    } else {
6        window.addEventListener('DOMContentLoaded', fn);
7    }
8}
9onReady(function () {
10    console.log('DOM fully loaded and parsed');
11});
12console.log('==Starting==');

DOMが読み込み済みかどうかで、コールバック関数が同期的か非同期的に呼び出されるのかが異なっています。

onReadyを呼ぶ前にDOMの読み込みが完了している
同期的にコールバック関数が呼ばれる
onReadyを呼ぶ前にDOMの読み込みが完了していない
DOMContentLoaded のイベントハンドラとしてコールバック関数を設定する

そのため、このコードは配置する場所によって、 コンソールに出てくるメッセージの順番が変わってしまいます。

ですが、実際どのようにしてもコンソールに出てくるメッセージの順番が変わってしまう状況というのを作り出すことが出来ませんでした。どのようなときに順番が変わるのか出来ればコードなどを教えていただけないでしょうか･･･？

よろしくお願いします。

追記

試したこと1

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script defer src="test.js"></script>
</head>
<body>
</body>
</html>

試したこと2

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="test.js"></script>
</head>
<body>
</body>
</html>

sousuke

2018/01/08 00:31

「実際どのようにしても」の提示がないと回答は難しいと思います。

aegde

2018/01/08 00:57

追記しました。よろしくお願いします。

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

回答2件

ベストアンサー

mixed-onready.jsのじっこうするタイミングを変えればいいのです。

html
1<script src="mixed-onready.js"></script>

html
1<script defer src="mixed-onready.js"></script>

投稿2018/01/08 00:46

turbgraphics200

総合スコア4267

aegde

2018/01/08 00:58 編集

回答いただいたものを、質問文に追記したとおりに行ったのですが、どちらの実行結果も ==Starting== test.js:11:1 DOM fully loaded and parsed となり、コンソールのメッセージに変化がありませんでした。

turbgraphics200

2018/01/08 01:13

おかしいですね。ブラウザーは何使っているのでしょうか？ちなみに、IE11/Edge/Firefox/Chromeにおいては、コンソールに出力される順番が変わります。

aegde

2018/01/08 01:40

> ちなみに、IE11/Edge/Firefox/Chromeにおいては、コンソールに出力される順番が変わります。ごめんなさい、test.jsのconsole.logの位置をonReadyの上においていたためうまくいっていないようでした。なるほど、このコードはdefer属性をつけたとき、readyStateがinteractiveになるため即コールバック関数が実行されその後にconsole.logが実行される。 defer属性をつけないとき、readyStateがinteractiveでもcompleteでもないからDOMContentLoadedイベントが設定されてconsole.logのあとにコールバック関数が実行される、というものなんですね。とても勉強になりました。お付き合いありがとうございました。

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

こんにちは。

すでにベストアンサーが決まっていますが、別の例(document.readyStateがcomplete）を
挙げておきます。

function onReady(fn) に渡されるコールバック関数 fn が、
同期的に呼び出される部分と非同期的に呼び出される部分の両方を持つ
HTMLの例としては、以下のようなものが考えられます。

html
1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8">
5    <title>107969</title>
6    <script>
7        function onReady(fn) {
8            var readyState = document.readyState;
9            if (readyState === 'interactive' || readyState === 'complete') {
10                fn();
11            } else {
12                window.addEventListener('DOMContentLoaded', fn);
13            }
14        }
15        onReady(function () {
16            console.log('DOM fully loaded and parsed');
17        });
18        console.log('==Starting==');
19    </script>
20  </head>
21  <body>
22      <input
23          type="button"
24          onclick="onReady(
25                    function() {
26                        console.log('DOM fully loaded and parsed');
27                    });
28                 console.log('==Starting==');"
29          value="Click me !" />
30  </body>
31</html>

上記で、onReady が呼ばれるのは、以下の2箇所です。

(1) <script>・・・</script>の中

(2) ボタンがクリックされたとき(document.readyStateがcompleteになっています）

上記(1)、(2)で、==Starting== と、DOM fully loaded and parsed が
ログに出力される順番が違うのが確認できると思います。

さらに、サイトのほうの説明では、同期的に fn(); として fn を呼んでいるところを

javascript
1setTimeout(fn, 0);

にすべきと言っていますが、この修正を上記の HTML で行えば、ボタンをクリックしたときも
メッセージの順番が、<script>・・・</script>の中で呼ばれたときと同じ
==Starting== が先、DOM fully loaded and parsed が後
になることを確認できると思います。

以上、参考になれば幸いです。

投稿2018/01/08 01:45