setTimeoutが効かない

Question

実現したいこと

画面幅1024px以下では動画を自動再生し、終了後に画面から消えて次のコンテンツが表示される

発生している問題・分からないこと

画面幅を設定しないものは正常に動作するのに、画面幅をwindow.matchMedia('(max-width: 1024px)').matches)で指定したものは、setTimeoutメソッドの中身だけが効かない

該当のソースコード

【正常に動作しているもの】
$(function(){
  const opVideo = $('#opv').get(0);
  $('#opv-wrap').fadeIn(1000);

  opVideo.addEventListener('loadedmetadata', function() {
    const playTime = opVideo.duration * 1000 - 1000;

    setTimeout(function(){
      $('#opv-wrap').fadeOut(1000, function(){
        $('.slider_left').fadeIn(1000);
      });
    }, playTime);

  });

});

【setTimeout(function(){});の中身が動作していないもの】
$(window).on('load resize', function(){
  if (window.matchMedia('(max-width: 1024px)').matches){
    const opVideo = $('#opv-sp').get(0);
    $('#opv-wrap-sp').fadeIn(1000);

    opVideo.addEventListener('loadedmetadata', function() {
    const playTime = opVideo.duration * 1000 - 1000;

    setTimeout(function(){
      $('#opv-wrap-sp').fadeOut(1000, function(){
        $('.main_visual').fadeIn(1000);
      });
    }, playTime);

    });

  } else {
    $('#opv-wrap-sp').css('display','none');
  }
});

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

setTimeoutメソッドより上の関数は動いています。
画面幅を指定していない方はsetTimeoutメソッドも含め全て動いているので、何が悪いのかがわかりません。

補足

特になし

Comments

[maisumakun]

> setTimeoutメソッドより上の関数は動いています。

それは、どのような方法で確認しましたか？

[midori0329]

ご回答ありがとうございます！
画面幅を1024px以下に縮めた時に、
$('#opv-wrap-sp').fadeIn(1000);
は動作して、#opv-wrap-spがフェードインしてくるのです。

[maisumakun]

addEventListenerでセットしたイベントが動作していることは確認しましたか？

[midori0329]

ベストアンサーの方の仰るとおり、読み込み順の問題でした。
無事に解決いたしました！コメントいただきありがとうございました！

Answer 1

実は、$(function(){...})はloadイベントではないです。

Most browsers provide similar functionality in the form of a DOMContentLoaded event.
.ready() | jQuery API Documentation

別なイベントである load は、ページ全体が読み込まれたときにのみ使用します。 load を DOMContentLoaded がより適切である場面で使ってしまうことがよくある誤りです。
Document: DOMContentLoaded イベント - Web API | MDN

load イベントは、ページ全体が、スタイルシートや画像などのすべての依存するリソースを含めて読み込まれたときに発生します。
Window: load イベント - Web API | MDN

なので、DOMContentLoadedイベントで試してみてはどうでしょうか。

---

読み返してみてちょっとわかりにくいかな、と思ったので補足します。

Chrome の場合、

1. Document:DOMContentLoaded
2. HTMLMediaElement:loadedmetadata
3. Window:load

の順番でイベントが発火しているようです。

$(function(){...})は、Document:DOMContentLoadedなので、

1. Document:DOMContentLoaded
2. opVideo.addEventListener('loadedmetadata', ...)
3. HTMLMediaElement:loadedmetadata
4. Window:load

こういう順番で処理されると思われますが、

$(window).on('load resize', ...)は、

1. Document:DOMContentLoaded
2. HTMLMediaElement:loadedmetadata
3. Window:load
4. opVideo.addEventListener('loadedmetadata', ...)

という順番で処理されそうです。

つまり、発火後にハンドラの設定をしていますから、イベントを受取れないだろうと思います。

---

余談になりますが、Firefoxで試したところ、

1. HTMLMediaElement:loadedmetadata
2. Document:DOMContentLoaded
3. Window:load

という順番でしたので、こちらはどちらにしても動かないです。おそらく、プロパティをチェックするなどしてイベントがすでに発火しているかどうかをチェックする必要がありそうです。
Safariは試してないです。

Comments

[midori0329]

ご回答ありがとうございます！
早速試してみます。

[midori0329]

教えていただいた方法で無事実装できました！！
ご丁寧に補足までいただきありがとうございました。
読み込みの順番があること、大きな学びです。今後に活かします！