質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

2323閲覧

ボタンを押した時タイマーをリセットしてから起動したい

knight1220

総合スコア23

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2020/08/04 07:53

【実現したいこと】
2秒ごとに画像がスライドするスライダーを作成しました。
そこにインデックスボタンを追加しボタンを押した時、対応する画像が表示され、対応する画像が表示されてから2秒後に再び2秒ごとに画像が移動するようにしたいと考えています。

【現在の状況】
ボタンを押した時対象の画像を表示することはできているのですがボタンを押すタイミングによっては(画像が次スライドに移動する直前にボタンを押すなど)、対象の画像が表示されてから2秒を待たずに次の画像に移動してしまいます。

「2秒ごとに画像を移動させる処理」がずっと作動している状態で「クリックした時の処理」を実行しているので「クリックした時の処理」を実行中も2秒がカウントされているため「実現したい動作」にならないと考えています。

【試したこと】
「クリックの処理」にclearTimeoutを使用して一旦キャンセルしてからもう一度「2秒ごとに画像を移動させる処理」をsetTimeoutを使って呼び出す方法を試そうと思いましたが、setTimeoutのidが毎回変わるためうまくいきませんでした。

「実現したい動作」にするためにはどうすればいいか全くわからない状態となって困っております。
わかる方がいらっしゃいましたらご教授いただければ幸いです。

html

1<!-- ----- carousel3 ----- --> 2 <section class="carousel-3"> 3 <div class="carousel-h"> 4 <h1>Carousel 3</h1> 5 </div> 6 <div class="slider-wrapper3"> 7 <p class="slider-title3">carousel スライドで出現</p> 8 9 <div class="slides-container3"> 10 <ul class="slides3 transition" id="slide_case"> 11 <li class="slide3 no1 start "><img src="./img/1.png" alt=""></li> 12 <li class="slide3 no2 start"><img src="./img/2.png" alt=""></li> 13 <li class="slide3 no3 start "><img src="./img/3.png" alt=""></li> 14 <li class="slide3 no4 start"><img src="./img/4.png" alt=""></li> 15 <li class="slide3 no5 start"><img src="./img/5.png" alt=""></li> 16 </ul> 17 </div> 18 19 <div class="index-btn-wrapper3"> 20 <!--index_btn_coveにclass名にstopを入れるとindexボタンを押した時オートスライドが停止する--> 21 <ul id="index_btn_cover" class="slide_stop"> 22 </ul> 23 </div> 24 </div> 25 </section>

JavaScript

1jQuery(function($){ 2 var slideList=$('.slide3'); 3 var slideLength=slideList.length; 4 5 //htmlにスライドを追加すると自動でスライドを追加する 6 let slideCopyRoot=document.getElementById('slide_case'); 7 for(i=0; i<slideLength; i++){ 8 let slideCopy=slideCopyRoot.children[i].cloneNode(true); 9 document.getElementById('slide_case').appendChild(slideCopy); 10 } 11 12 13 14 //htmlでスライド(画像)を追加した時(一番下に記入した時)一番上に自動で移動させる記述(center画像をhtmlの一番上に記述したものにするため。) 15 let slideCase=document.getElementById('slide_case'); 16 let slideCaseLastChild=document.getElementById('slide_case').lastElementChild; 17 let slideCaseFirstChild=document.getElementById('slide_case').firstElementChild; 18 slideCase.insertBefore(slideCaseLastChild,slideCaseFirstChild); 19 // 20 21 //=================================================// 22 //autoslider 23 //=================================================// 24 var loopCounter=0; 25 var btnIndex=-1; 26 var autoslider1=function(autoclear3){ 27 console.log('autoslider1読み込み'); 28 if( loopCounter < slideLength){ 29 $('.slides3').addClass('transition'); 30 loopCounter+=1; 31 $('.slides3').css('transform','translateX('+loopCounter*(-100)+'%)'); 32 var clear=setTimeout(autoslider3,2000); 33 34 }else{ 35 $('.slides3').removeClass('transition'); 36 setTimeout(autoslider2,0); 37 } 38 39 } 40 41 42 43 var autoslider2=function(){ 44 loopCounter=0; 45 $('.slides3').css('transform','translateX(0%)'); 46 var autoclear2=setTimeout(autoslider1,100); 47 } 48 49 var autoslider3=function(){ 50 var autoclear3=setTimeout(autoslider1,2000); 51 return autoclear3; 52 } 53 54 var autoclear1=setTimeout(autoslider1,1000); 55 56 57 //=================================================// 58 //indx_btnの作成 59 //=================================================// 60 for(i=0; i<slideLength; i++){ 61 let indexBtn=document.createElement('li'); 62 indexBtn.id="index-btn"+i; 63 indexBtn.className="index-btn3"; 64 indexBtn.textContent=i+1; 65 document.getElementById('index_btn_cover').insertBefore(indexBtn,null); 66 } 67 68 69 70 //=================================================// 71 //index_btnを押した時のスライド制御 72 //=================================================// 73 $('.index-btn3').click(function(){ 74 btnIndex=$('.index-btn3').index( $(this) ); 75 $('.slides3').css('transform','translateX('+btnIndex*(-100)+'%)'); 76 console.log(btnIndex); 77 if( !(-1===btnIndex) ){ 78 if( $('#index_btn').hasClass('slide_sotp') ){ 79 console.log("true"); 80 }else{ 81 console.log('btnIndex false'); 82 loopCounter=btnIndex; 83 btnIndex=-1; 84 console.log("false"); 85 } 86 } 87 }); 88 89});//jQuery end

scss

1.carousel-3{ 2 padding-top: 20px; 3 padding-bottom: 20px; 4} 5 6.slider-title3{ 7 font-size: 32px; 8 text-align: center; 9} 10 11//=================================================// 12//slide部分 13//=================================================// 14.slides-container3{ 15 padding:0 50px; 16 position: relative; 17 //overflow: hidden; 18 19 20} 21 22.slides3{ 23 text-align: center; 24 max-width: 800px; 25 margin:0 auto; 26 list-style: none; 27 padding-left: 0; 28 white-space: nowrap; 29 letter-spacing: -0.4em; 30 img{ 31 width: 100%; 32 height: 500px; 33 } 34 } 35 36.transition{ 37 transition:transform 1s; 38} 39 40.slide3{ 41 padding:30px; 42 box-sizing: border-box; 43} 44 45 46//=================================================// 47//slide部分 end 48//=================================================// 49 50//ボタンデザイン1 51.index-btn3{ 52 background-color: red; 53 text-align: center; 54 width: 40px; 55 height: 40px; 56 line-height: 40px; 57 display: inline-block; 58 margin-right: 10px; 59 font-size: 20px; 60 cursor: pointer; 61} 62 63// btnの位置調整 64.index-btn-wrapper3{ 65 padding-top: 40px; 66 text-align: center; 67} 68 69//slideのon,off 70.slide3{ 71 transition:transform 2s ease 0s; 72 display:inline-block; 73} 74 75 76/////////////////////// 77 78.start{ 79 transform:translate(-100%); 80} 81

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

「クリックの処理」にclearTimeoutを使用して一旦キャンセルしてからもう一度「2秒ごとに画像を移動させる処理」をsetTimeoutを使って呼び出す方法を試そうと思いましたが、setTimeoutのidが毎回変わるためうまくいきませんでした。

setTimeoutのidは毎回変わりますが、どの瞬間でも「現在タイムアウトを待っているid」は1つだと思います。
そのidを変数に格納しておいてclearTimeoutすればいいのではないでしょうか?

投稿2020/08/04 09:18

ku__ra__ge

総合スコア4524

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

knight1220

2020/08/04 09:29

早速の回答ありがとうございます。 autoSlider1(関数)の中で定義されたsetTimeoutのidをクリックイベントに渡す方法がわからず断念しておりました。 もしよろしければ渡し方を教えて頂けないでしょうか?
ku__ra__ge

2020/08/05 01:25

グローバル変数に格納してクリックイベント内でそのグローバル変数を見てください。 クロージャという仕組みを使えば必要な箇所だけから変数にアクセスできる書き方もできますので余裕があれば確認してみてください。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問