クリックをしなかった場合に作動させる方法を教えてください。

前提・実現したいこと

クリックをしなかった場合に作動させる方法を教えてください。よろしくお願いします。

__#button1, #button2のどちらかがクリックされた場合、下の#timeUpが開くプログラムを実行させないようにしたいです。

該当のソースコード

html
1<div id="fast-page">
2  <div id="fast-button"></div>
3</div>
4
5<div id="main-page">
6  <div id="button1"></div>
7  <div id="button2"></div>
8</div>
9
10
11<div id="page1">
12  <h1>ページ１</h1>
13</div>
14
15<div id="page2">
16  <h1>ページ２</h1>
17</div>
18
19<div id="timeUp">
20  <h1>タイムアップ</h1>
21</div>

javascript
1$('#fast-button').click(function(){
2  $('#fast-page').fadeOut();
3  $('#main-page').fadeIn();
4
5//もしも、#button1, #button2のどちらかがクリックされた場合、
6//下の#timeUpが開くプログラムを実行させないようにしたいです。
7
8  setTimeout( ()=> {
9      $('#main-page').fadeOut();
10      $('#timeUp').fadeIn();
11  }, 5000);
12
13
14});
15
16$('#button1').click(function(){
17  $('#main-page').fadeOut();
18  $('#page1').fadeIn();
19});
20
21$('#button2').click(function(){
22  $('#main-page').fadeOut();
23  $('#page2').fadeIn();
24});

css
1#main-page, #page1, #page2, #timeUp{
2  display:none;
3}

Daregada

2020/08/01 03:02

HTMLの「fast2」は「page2」の誤りでは?

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

回答1件

ベストアンサー

HTMLやCSSやJavascriptの内容はファイル全体とし(隠したい部分は適当に伏せて)、回答者が容易に試験できる状態にしてください。また、提示するHTML/CSS/Javascriptによる表示をご自分で一度は確認してください。

今回ですと、ID指定の誤りfast2、ボタン的な動きをさせるdiv要素の内容を設定していない、などが回答への妨げになります。

さて、本題ですが、setTimeoutでタイマーを設置する際にIDが返ってくるのでそれを適当な変数に保持し、そのIDをclearTimeoutの実引数に指定してタイマーをクリアすれば、タイムアウト時の関数は実行されません。

Javascript
1$(function () {
2  let timeoutId;
3
4  $('#fast-button').click(function () {
5    $('#fast-page').fadeOut();
6    $('#main-page').fadeIn();
7
8    timeoutId = setTimeout(() => {
9      $('#main-page').fadeOut();
10      $('#timeUp').fadeIn();
11    }, 5000);
12  });
13
14  $('#button1').click(function () {
15    $('#main-page').fadeOut();
16    $('#page1').fadeIn();
17    clearTimeout(timeoutId);
18  });
19
20  $('#button2').click(function () {
21    $('#main-page').fadeOut();
22    $('#page2').fadeIn();
23    clearTimeout(timeoutId);
24  });
25});