jqueryで表示させたモーダルを、時間経過・時間経過する前でもクリックを条件に非表示にしたい

Question

jqueryのイベント操作に関する質問です。

jqueryで表示させたモーダルを、「表示してから一定時間後」と「ブラウザ側でクリックした時」どちらかをイベントにして非表示にしたいのですが、方法が分からずに悩んでいます。

実装したい挙動としては

「自動で表示したモーダルを「表示から5秒後に自動で消える、5秒経つ前であってもブラウザ側でクリックしたら、モーダルを非表示にする」

というものです。

現時点のモーダルを表示させるコードは以下の通りです。

  //フラグ時に自動でモーダル表示
  var modalFlg = true;
  var eventModal = $('.js-modal-auto');
  var modalCover = $('.js-modal-cover');

  if(modalFlg){
    eventModal.add(modalCover).show();
    eventModal.add(modalCover).delay(5000).fadeOut(1000);
  };

クリック時にモーダルを非表示にするなら

  eventModal.add(modalCover).on('click', function() {
    eventModal.add(modalCover).fadeOut(1000);
  });

イベントハンドラについてはspaceで区切ることで複数のイベントを仕込めるということはわかりました。
https://qiita.com/shizuma/items/d561f37f864c3ebb5096

しかし、「クリック」はイベントですが、時間経過についてはdelayやsetIntervalといったエフェクト系メソッドしかないように思います（私が不勉強なだけかもしれませんが）。

必須の機能ではないのですが、２つの条件を両立してモーダルの非表示させる方法をご存知であればご教示お願いいたします。

Answer 1

setTimeoutを使って、時間が来たら.trigger( 'click' )で閉じてしまえばよいです。

【WindowOrWorkerGlobalScope.setTimeout() - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/WindowTimers/setTimeout

【.trigger() | jQuery API Documentation】
https://api.jquery.com/trigger/

Comments

[marutto]

ご回答ありがとうございます。
仰る通り、setIntervalで時間経過後にtrigger()を使えばクリックイベントを一定時間後に仕込めました！

ただ、私の書き方が悪かったのか、望んでいた挙動と異なります。

「自動で表示したモーダルを「表示から5秒後に自動で消える、5秒経つ前であってもブラウザ側でクリックしたら、モーダルを非表示にする」

というイベント設定をする方法についてご存知でしたら、改めてアドバイスお願いします。

お手数をかけて申し訳ございません。

[kei344]

setIntervalとsetTimeoutは違うので、まずそこは確認してください。

> 望んでいた挙動と異なります。
どう違うかを具体的にお願いします。

[marutto]

適切なアドバイスいただいたにも関わらず誤読したためにお手数をおかけしました。申し訳ありません。

改めてコードを見直したお陰で、実装したいかった通りの機能を実装できました。
ありがとうございました！