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

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

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

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

jQuery

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

Q&A

解決済

3回答

5957閲覧

clearTImeoutの使い方

adwadwadw

総合スコア56

JavaScript

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

jQuery

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

0グッド

0クリップ

投稿2016/05/26 14:26

buttonを押した時にclearTimeoutを使ってstartSlot()を停止させたいのですが出来ません。どうしたらいいでしょうか?

さらになんですが、これをbuttomを押した時にゆっくりと止まる方法を教えていただきたいです。

HTML

1<!DOCTYPE html> 2<meta charset = 'utf-8'> 3<script src ='jquery-1.12.4.js'></script> 4<script src='slot2.js'></script> 5 6<body> 7 <div class='container'> 8 <div id="slot"> 9 <div id='box1' class='box'>0</div> 10 <div id='box2' class='box'>0</div> 11 <div id='box3' class='box'>0</div> 12 </div> 13 14 <button class='start'>start</button> 15 <div id='answer'>good!</div> 16 17 </div> 18</body> 19

JavaScript

1$(function(){ 2 3 var start_count = 0; 4 var speed = 0; 5 var x,y,z; 6 var id = setTimeout(startSlot, 100); 7 8 $('.start').click(function(){ 9 if(start_count == 0){ 10 startSlot(); 11 start_count += 1; 12 }else if(start_count == 1){ 13 clearTimeout(id); 14 start_count == 0; 15 } 16 }); 17 18 19 var startSlot = function(){ 20 21 console.log(speed++); 22 var x = Math.floor(Math.random() * 10); 23 var y = Math.floor(Math.random() * 10); 24 var z = Math.floor(Math.random() * 10); 25 26 $('#box1').text(x); 27 $('#box2').text(y); 28 $('#box3').text(z); 29 setTimeout(startSlot,100); 30 } 31}); 32

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

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

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

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

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

guest

回答3

0

タイマーの止め方に関してはMIURA_Yasuyukiさんの回答をご参照ください。
補足として、clearTimeout()の引数に渡すのはsetTimeoutの戻り値でなければならないと覚えておいてください。

「ゆっくりと止める」に関しては

$(function(){ var start_count = 0; var x,y,z; var id; var id2; //一応clearTimeout用に作成しましたが、いらないかも… var count = 20; // ここの数値を変更すればスローになってから止まるまでの時間を調整可 var speed = 100; // 特に使われていなかったので、こちらを減速判定用に使用 var startSlot = function(){ var x = Math.floor(Math.random() * 10); var y = Math.floor(Math.random() * 10); var z = Math.floor(Math.random() * 10); $('#box1').text(x); $('#box2').text(y); $('#box3').text(z); id = setTimeout(startSlot,100); } var slowEnd = function(){ //スローダウン用 var x = Math.floor(Math.random() * 10); var y = Math.floor(Math.random() * 10); var z = Math.floor(Math.random() * 10); $('#box1').text(x); $('#box2').text(y); $('#box3').text(z); if(count < 10){ speed = speed+5; //ここの数値の増減でスローになっていく加減を調整可 } if(count > 0){ id2 = setTimeout(slowEnd,speed); }else if(count === 0){ start_count = 0; //slowEnd関数終了のここで$('.start')のクリックイベントを初期化 } count--; } $('.start').click(function(){ if(start_count === 0){ startSlot(); start_count = 1; //+= 1のようにせず、素直に「代入」でOK }else if(start_count === 1){ start_count = 2; //一回他のクリックイベントが重複して呼び出されないように clearTimeout(id); slowEnd(); } }); });

このように、もう一つ関数をつくってしまうのが良いかなと思います。
また、現状だとタイマーイベントが重複して呼べてしまうので
上記の参考コードのようにタイマーイベントが動作中は重複して呼ばれないようにしておくと良いでしょう。

投稿2016/05/26 16:18

編集2016/05/26 16:24
manabufukai

総合スコア700

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

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

0

ベストアンサー

さらになんですが、これをbuttomを押した時にゆっくりと止まる方法を教えていただきたいです。

こんな感じ?

javascript

1$(function(){ 2 3 var start_count = 0; 4 var speed = 0; 5 var x,y,z; 6 var downcount; 7 var down_flag; 8 9 $('.start').click(function(){ 10 if(start_count == 0){ 11 start_count = 1; 12 speed = 1; 13 downcount = 5; 14 down_flag = false; 15 startSlot(); 16 }else if(start_count == 1){ 17 start_count = 0; 18 down_flag = true; 19 } 20 }); 21 22 23 var startSlot = function(){ 24 25 if(down_flag) { 26 downcount--; 27 speed++; 28 } 29 var x = Math.floor(Math.random() * 10); 30 var y = Math.floor(Math.random() * 10); 31 var z = Math.floor(Math.random() * 10); 32 33 $('#box1').text(x); 34 $('#box2').text(y); 35 $('#box3').text(z); 36 if(downcount != 0) { 37 setTimeout(startSlot,100*speed); 38 } 39 } 40});

投稿2016/05/26 16:00

MIURA_Yasuyuki

総合スコア306

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

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

adwadwadw

2016/05/26 16:15

ありがとうございました!
guest

0

その都度、その都度、setTimeoutの戻り値を見る必要があります。
以下のように2行変更すれば、startSlot()を停止できます。

Javascript

1$(function(){ 2 3 var start_count = 0; 4 var speed = 0; 5 var x,y,z; 6 // var id = setTimeout(startSlot, 100); 7 var id; 8 9 $('.start').click(function(){ 10 if(start_count == 0){ 11 startSlot(); 12 start_count += 1; 13 }else if(start_count == 1){ 14 clearTimeout(id); 15 start_count == 0; 16 } 17 }); 18 19 20 var startSlot = function(){ 21 22 console.log(speed++); 23 var x = Math.floor(Math.random() * 10); 24 var y = Math.floor(Math.random() * 10); 25 var z = Math.floor(Math.random() * 10); 26 27 $('#box1').text(x); 28 $('#box2').text(y); 29 $('#box3').text(z); 30 // setTimeout(startSlot,100); 31 id = setTimeout(startSlot,100); 32 } 33});

投稿2016/05/26 15:49

MIURA_Yasuyuki

総合スコア306

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

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

manabufukai

2016/05/26 16:02

クリックイベント時のstart_count == 0(多分本当は代入をしたい)の箇所の修正も必要だと思われますよ。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問