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

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

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

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

1411閲覧

setInterval setTimeoutに関して

daichan_32

総合スコア13

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2017/11/15 04:30

###前提・実現したいこと
現在、setInterval/setTimeout関数を活用してcanvasの移動をスムーズにしようとしています。
実際にプログラムを組んでみてボタンをクリックするとスムーズに移動することはできました。
しかし、移動を中止させることができません。

ご教授よろしくお願い致します。

###該当のソースコード

javascript

1 2↓ボタンクリックで動作 3function xxx(){ 4var setIV = setInterval(rightContent,100); 5setTimeout(stopMovement,1000); 6} 7 8function rightContent(){ 9※右に移動するプログラムを書いています 10} 11//0.1秒ごとに移動 12 13function stopMovement(){ 14clearInterval(setIV); 15} 16//一秒後に移動の中止

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

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

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

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

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

guest

回答2

0

ベストアンサー

function xxx(){

var setIV = setInterval(rightContent,100);
・・・

ローカル変数でタイマーidをつくっても外部から参照できませんよ
グローバルで宣言すればよいのでは

javascript

1var setIV; 2function xxx(){ 3 setIV = setInterval(rightContent,100); 4 ・・・

投稿2017/11/15 04:37

yambejp

総合スコア114581

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

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

daichan_32

2017/11/15 05:22

解決できました! 理由も書いていただきわかりやすかったです。メモしておきます。 ありがとうございました。
guest

0

clearInterval/clearTimeoutを使えばよろしいかと。

window.clearInterval - Web API インターフェイス | MDN

window.clearTimeout - Web API インターフェイス | MDN

-- 回答が不適切だったので修正:

↓ボタンクリックで動作 function xxx(){ var setIV = setInterval(rightContent,100); setTimeout(stopMovement,1000); }
function stopMovement(){ clearInterval(setIV); } //一秒後に移動の中止

変数「setIV」がfunction xxxの中で宣言されているため、stopMovementから参照できない。

クロージャを使って、こんな風にすれば

↓ボタンクリックで動作 function xxx(){ var setIV = setInterval(rightContent,100); setTimeout(stopMovement(setIV),1000); }
function stopMovement(setIV){ return function(){ clearInterval(setIV); }; } //一秒後に移動の中止

投稿2017/11/15 04:34

編集2017/11/15 04:43
tkturbo

総合スコア5572

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

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

daichan_32

2017/11/15 05:30

stopMovement(setIV)という記述はふさわしくないようです。 無名関数を使うと記述がございました(><) コメントありがとうございました。
tkturbo

2017/11/15 05:33

「無名関数を使うと」←なので、stopMovementから無名関数を返すように書いていますが。 グローバル変数を使うのも一つの解ですが、ダブルクリックされた時の挙動を確認されるのをお勧めします。
daichan_32

2017/11/15 09:45

すみません。 自分のミスでした。 ご指摘ただいたクロージャというものをしっかりと勉強してみます。 本当にありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問