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

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

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

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

Q&A

解決済

3回答

2425閲覧

javascriptのsetIntervalとclearIntervalについて

fundidididi

総合スコア30

JavaScript

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

0グッド

0クリップ

投稿2016/04/10 23:54

編集2016/04/11 00:03

もしかしたらトンチンカンな質問かもしれませんが、よろしくお願いします。

javascript

1var cnt = 0; 2var timerId; 3 4function simulation(){ 5 timerId = setInterval(draw,10); 6} 7 8function draw(){ 9 //描画処理 10 ... 11 //カウント 12 cnt++; 13 //終了条件満たした時クリアインターバル 14 if (cnt == 10){ 15 clearInterval(timerId); 16 } 17}

上記のコードでうまくいっています。
10回繰り返して終了です。
これはdrawが呼び出されるたびに終了条件判定して満たせば終了と、とてもわかりやすいです。

javascript

1var cnt = 0; 2var timerId; 3 4function simulation(){ 5 timerId = setInterval(draw,10); 6 //終了条件満たした時クリアインターバル 7 if (cnt == 10){ 8 clearInterval(timerId); 9 } 10} 11 12function draw(){ 13 //描画処理 14 ... 15 //カウント 16 cnt++; 17}

しかし、上記のコードでもうまく動いてしまいます。
simulationは繰り返し呼び出されているわけでもないので、終了条件満たさず描画し続けるかと思ったのですが、終了条件満たした瞬間終わってしまいました。

これはどのような動きになっているのでしょうか?

ちなみに

javascript

1var cnt = 0; 2var timerId; 3 4function simulation(){ 5 timerId = setInterval(draw,10); 6 //終了条件満たした時クリアインターバル 7 if (cnt == 10){ 8 console.log("b"); 9 clearInterval(timerId); 10 } else { 11 console.log("a"); 12 } 13} 14 15function draw(){ 16 //描画処理 17 ... 18 //カウント 19 cnt++; 20}

このようにすると、aのみ出力されbが出力されずますます混乱しました。

よろしくお願いします。

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

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

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

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

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

tkturbo

2016/04/11 00:17

simulationはどのように呼び出されてますか?
fundidididi

2016/04/11 00:25

<script src="/js/sim.js"></script> <body onLoad="simulation();"> <canvas width="300" height="300" id="sim"> </canvas> </body> といった感じです。
guest

回答3

0

再現できません.コード全てを見せてください.

HTML

1<!DOCTYPE html> 2<meta charset="UTF-8"> 3<title>Example</title> 4<canvas></canvas> 5<script> 6 'use strict'; 7 8 addEventListener('DOMContentLoaded', () => { 9 let canvas = document.querySelector('canvas'); 10 let ctx = canvas.getContext('2d'); 11 function fitsize() { 12 canvas.width = window.innerWidth; 13 canvas.height = window.innerHeight; 14 } 15 addEventListener('resize', fitsize); 16 fitsize(); 17 18 let x = 0, y = 0, radius = 50, vx = 2, vy = 2, cnt = 0; 19 let timer = setInterval(() => { 20 ++cnt; 21 ctx.clearRect(0, 0, canvas.width, canvas.height); 22 ctx.beginPath(); 23 if (x + 2 * radius > canvas.width || x < 0) vx = -vx; 24 if (y + 2 * radius > canvas.height || y < 0) vy = -vy; 25 x += vx; 26 y += vy; 27 ctx.arc(x + radius, y + radius, radius, 0, Math.PI * 2); 28 ctx.fillStyle = 'red'; 29 ctx.fill(); 30 if (cnt == 100) { 31 clearInterval(timer); 32 } 33 }); 34 }); 35</script>

これはちゃんと一定時間後に止まりますし,

HTML

1<!DOCTYPE html> 2<meta charset="UTF-8"> 3<title>Example</title> 4<canvas></canvas> 5<script> 6 'use strict'; 7 8 addEventListener('DOMContentLoaded', () => { 9 let canvas = document.querySelector('canvas'); 10 let ctx = canvas.getContext('2d'); 11 function fitsize() { 12 canvas.width = window.innerWidth; 13 canvas.height = window.innerHeight; 14 } 15 addEventListener('resize', fitsize); 16 fitsize(); 17 18 let x = 0, y = 0, radius = 50, vx = 2, vy = 2, cnt = 0; 19 let timer = setInterval(() => { 20 ++cnt; 21 ctx.clearRect(0, 0, canvas.width, canvas.height); 22 ctx.beginPath(); 23 if (x + 2 * radius > canvas.width || x < 0) vx = -vx; 24 if (y + 2 * radius > canvas.height || y < 0) vy = -vy; 25 x += vx; 26 y += vy; 27 ctx.arc(x + radius, y + radius, radius, 0, Math.PI * 2); 28 ctx.fillStyle = 'red'; 29 ctx.fill(); 30 }); 31 32 if (cnt == 100) { 33 clearInterval(timer); 34 } 35 }); 36</script>

こっちは動き続けます.

なおこのようなアニメーション用途では,(ブラウザの対応がまちまちですが)requestAnimationFrameを使うほうがおすすめです.

HTML

1<!DOCTYPE html> 2<meta charset="UTF-8"> 3<title>Example</title> 4<canvas></canvas> 5<script> 6 'use strict'; 7 8 addEventListener('DOMContentLoaded', () => { 9 let canvas = document.querySelector('canvas'); 10 let ctx = canvas.getContext('2d'); 11 function fitsize() { 12 canvas.width = window.innerWidth; 13 canvas.height = window.innerHeight; 14 } 15 addEventListener('resize', fitsize); 16 fitsize(); 17 18 let x = 0, y = 0, radius = 50, vx = 2, vy = 2; 19 requestAnimationFrame(function draw() { 20 requestAnimationFrame(draw); 21 ctx.clearRect(0, 0, canvas.width, canvas.height); 22 ctx.beginPath(); 23 if (x + 2 * radius > canvas.width || x < 0) vx = -vx; 24 if (y + 2 * radius > canvas.height || y < 0) vy = -vy; 25 x += vx; 26 y += vy; 27 ctx.arc(x + radius, y + radius, radius, 0, Math.PI * 2); 28 ctx.fillStyle = 'red'; 29 ctx.fill(); 30 }); 31 }); 32</script>

投稿2016/04/11 00:57

編集2016/04/11 01:00
mpyw

総合スコア5223

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

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

0

2つ目の質問者ソースで

javascript

1function simulation(){

この行に全角文字が使用されているためエラーになりますが、その部分を修正した結果、clearIntervalは一度も実行されずにdrawが実行され続ける結果になります。
質問者ソースで何か不足している情報があるのかもしれません。

また、

このようにすると、aのみ出力されbが出力されず

javascript

1if (cnt == 10){ 2 console.log("b"); 3 clearInterval(timerId); 4} else { 5 console.log("a"); 6}

最初は「cnt==0」なので当然elseブロックしか実行されません。

投稿2016/04/11 00:56

tkturbo

総合スコア5572

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

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

0

ベストアンサー

コードを見る限りは描画し続けるように見えますね。
説明用コードにミスや見落としがある可能性もあるので、
こうした小さいプログラムであれば、jsdo.itなどに代表されるコードをシェアできるサービスや
Githubなどで実際に問題が起きるコード全体を共有すると、さらに的確な答えが得られやすいと思います。

投稿2016/04/11 01:01

edo_m18

総合スコア2283

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問