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

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

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

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

4058閲覧

再生ボタンを連打するととてつもないスピードで変更するようになります。

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2016/12/15 03:06

再生ボタンを連打するととてつもないスピードで変更するようになります。
setIntervalで作ったスライドショーの再生ボタンを連打しても、
おかしくならないようにできないのでしょうか?

//停止した場合の再開ボタンのJS
$('#js-play-btn').click(function() {
startTimer();
});
/* /オプションを足す場合はここへ記載 */

var isStart = false;
$('#js-play-btn').click(function() {
if (isStart == false) {
startTimer();
isStart = true;
}
});

としましたが連打するととてつもないスピードで変更するようになります。

こちらは'#js-play-btnをクリックしたときにisStart がfalseだったらタイマーを再開して、turueにfalseを変更するということをやっているのでしょうか?

ただisStartという変数や内容はここで定義するまえには存在しないものですよね。
この中身がtrueかfalseかはどこで決まっているのでしょうか?

またfalseが停止中の時で、trueが再生中を示しているのでしょうか?
これは仕様で決まっているのですか?

//スライドショー $(function(){ //(1)ページの概念・初期ページを設定 var page=0; //(2)イメージの数を最後のページ数として変数化 var lastPage =parseInt($("#slide img").length-1); //(3)最初に全部のイメージを一旦非表示にします $("#slide img").css("display","none"); //(4)初期ページを表示 $("#slide img").eq(page).css("display","block"); //(5)ページ切換用、自作関数作成。changePageを定義 function changePage(){ $("#slide img").fadeOut(1000); $("#slide img").eq(page).fadeIn(1000); }; //(6)~秒間隔でイメージ切換の発火設定 //※(5)でchangePageを定義している //TimerというタイマーIDを作成した。 var Timer; function startTimer(){ Timer =setInterval(function(){ if(page === lastPage){ page = 0; changePage(); }else{ page ++; changePage(); }; },5000); } //(7)~秒間隔でイメージ切換の停止設定 //clearIntervalとは、「setInterval」メソッドの繰り返し処理を停止するメソッド function stopTimer(){ clearInterval(Timer); } //(8)タイマースタート startTimer(); /* オプションを足す場合はここへ記載 */ //(9)「次へ」、左に画像を動かすをクリックボタン用のjs //※(5)でchangePageを定義している $("#next-left-btn").click(function() { //タイマー停止&スタート(クリックした時点から~秒とする為) stopTimer(); startTimer(); if(page === lastPage){ page = 0; changePage(); }else{ page ++; changePage(); }; }); //「戻る」、右に画像を動かすをクリックボタン用のjs $("#next-right-btn").click(function() { //タイマー停止&スタート(クリックした時点から~秒とする為) stopTimer(); startTimer(); if(page === 0){ page = lastPage; changePage(); }else{ page --; changePage(); }; }); //TimerというタイマーIDを作成した。下記の部分でしていている。 //Timer =setInterval(function(){ $('#pause-btn').click(function() { clearInterval(Timer); } ) //停止した場合の再開ボタンのJS $('#js-play-btn').click(function() { startTimer(); }); /* /オプションを足す場合はここへ記載 */ var isStart = false; $('#js-play-btn').click(function() { if (isStart == false) { startTimer(); isStart = true; } }); });

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

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

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

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

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

guest

回答1

0

ベストアンサー

setIntervalをするときにかならずタイマーidを受けておいて
実行する前にかならずclearIntervalしてください

javascript

1var timerId;//timerIdは事前にグローバルで宣言しておく 2・・・ 3clearInterval(timerId); 4timerId=setInterval(function(){・・・},1000); 5

sample

以下だと、timerIdがどんどん上書きされるので、最後ものしかとめられない

javascript

1<script> 2var timerId; 3timerId=setInterval(function(){document.getElementById('hoge1').value++},100); 4timerId=setInterval(function(){document.getElementById('hoge2').value++},200); 5timerId=setInterval(function(){document.getElementById('hoge3').value++},300); 6setTimeout(function(){clearInterval(timerId)},1000); 7</script> 8<input type="text" id="hoge1" value="0"><br> 9<input type="text" id="hoge2" value="0"><br> 10<input type="text" id="hoge3" value="0"><br> 11

複数のタイマーをまわすならこんな感じ

javascript

1<script> 2var timerIds=[]; 3timerIds[0]=setInterval(function(){document.getElementById('hoge4').value++},100); 4timerIds[1]=setInterval(function(){document.getElementById('hoge5').value++},200); 5timerIds[2]=setInterval(function(){document.getElementById('hoge6').value++},300); 6setTimeout(function(){timerIds.forEach(function(obj){clearInterval(obj)})},2000); 7</script> 8<input type="text" id="hoge4" value="0"><br> 9<input type="text" id="hoge5" value="0"><br> 10<input type="text" id="hoge6" value="0"><br> 11

投稿2016/12/15 03:57

編集2016/12/15 09:58
yambejp

総合スコア114572

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

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

退会済みユーザー

退会済みユーザー

2016/12/15 04:05

ありがとうございます。難しいですね。 timerId=setInterval(function(){・・・},1000);の波かっこの中に $('#js-play-btn').click(function() { startTimer(); }); を入れればよいのでしょうか? 初心者なので詳しいことがわからずすいません・
yambejp

2016/12/15 04:12

startTimer()のソースを提示してください startTimerの中でsetIntervalを実行しているのですよね?
yambejp

2016/12/15 04:14

失礼しました。ソースはありましたね function startTimer(){ の1行目に clearInterval(Timer); と記載すればいけませんか?
退会済みユーザー

退会済みユーザー

2016/12/15 04:22

理由はわかりませんが下記のようにしたところ解決しました。 ありがとうございます。 var Timer; function startTimer(){ clearInterval(Timer); Timer =setInterval(function(){ if(page === lastPage){ page = 0; changePage(); }else{ page ++; changePage(); }; },5000); }
yambejp

2016/12/15 04:27

>理由はわかりませんが clearInterval()しないとsetInterval()が複数同時に稼働し 同じ処理を同時にかけるからです とくにグローバル変数を参照していると処理が競合して 思わぬ挙動となるケースがありますのでご注意ください
退会済みユーザー

退会済みユーザー

2016/12/15 05:08

ありがとうございます。 おそらくclearInterval(Timer);が初めに入っていないと下記が何度も実行され、 同じ処理が被ってしまうのですね。 その点clearInterval(Timer);をsetInterval処理の前に入れると 一度目はsetIntervalが0なので、clearIntervalは素通りしてsetintervalが1実行され、 その後もう一度押すと、一度clearIntervalで1が0にリセットされ、 その後その下のsetintervalが実行され、0から1になるという流れが実現できたという解釈で正しいでしょうか? つまりclearIntervalは0なら0のまま、1以上setintervalの処理がある場合はそれをリセットし0の状態にしてくれる関数ということでよいでしょうか? Timer =setInterval(function(){ if(page === lastPage){ page = 0; changePage(); }else{ page ++; changePage(); }; },4000);
退会済みユーザー

退会済みユーザー

2016/12/15 09:07

最後に上記認識が正しいかだけ教えてもらえませんか? 再質問にした方がよろしければそのようにします。
yambejp

2016/12/15 09:18

>つまりclearIntervalは0なら0のまま、1以上setintervalの処理がある場合はそれをリセットし0の状態にしてくれる関数ということでよいでしょうか? setIntervalを実行すると戻り値がそのタイマーのidを返します。 次回setIntervalをする直前で前回のtimerIdを利用して clearInterval(timerId)しておけばsetIntervalは並行して実行されないということです もちろんsetIntervalを利用して複数のタイマーを回したいこともあると思いますので timerIdを配列でもつなど工夫する必要があります・。
退会済みユーザー

退会済みユーザー

2016/12/15 09:40

難しいですね。 下記Timerという変数名がタイマーIDを作成したことになるのですかね? var Timer; それともこの変数の中身の下記コードがタイマーIDに当たるのでしょうか? taima-IDとは、予約されたメソッドなどではなく自分で作った、時間ごとに実行されるプログラムのことを指すのでしょうか? Timer =setInterval(function(){ if(page === lastPage){ page = 0; changePage(); }else{ page ++; changePage(); }; },4000);
yambejp

2016/12/15 09:55

わかりにくくて申し訳ないです とりあえずサンプル追記しときます
退会済みユーザー

退会済みユーザー

2016/12/15 11:41

サンプルまで作っていただき大変ありがたいのですが、残念ながら初心者の私には猫に小判で、 恐縮ながら理解ができません。 >>> おそらくclearInterval(Timer);が初めに入っていないと下記が何度も実行され、 同じ処理が被ってしまうのですね。 その点clearInterval(Timer);をsetInterval処理の前に入れると 一度目はsetIntervalが0なので、clearIntervalは素通りしてsetintervalが1実行され、 その後もう一度押すと、一度clearIntervalで1が0にリセットされ、 その後その下のsetintervalが実行され、0から1になるという流れが実現できたという解釈で正しいでしょうか? つまりclearIntervalは0なら0のまま、1以上setintervalの処理がある場合はそれをリセットし0の状態にしてくれる関数ということでよいでしょうか? 上記の解釈が技術的にかっこいい回答ではありませんが、考え方として正しいでしょうか?
退会済みユーザー

退会済みユーザー

2016/12/16 08:52

clearInterval 書式 clearInterval(タイマーID) window.clearInterval(タイマーID) フレームオブジェクト.clearInterval(タイマーID) 説明 setInterval()で設定されたタイマーを解除します。パラメータにはsetInterval()が返したタイマーIDを指定します。 上記のように記載がありました。 よって下記の処理が、一度なかったことになる。停止する。キャンセルされる。 という認識でよいでしょうか? Timer =setInterval(function(){ if(page === lastPage){ page = 0; changePage(); }else{ page ++; changePage(); }; },5000);
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問