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

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

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

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

Q&A

解決済

1回答

857閲覧

JavaScript clearIntervalがうまく動作しない

tetro

総合スコア8

JavaScript

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

0グッド

0クリップ

投稿2021/01/30 13:07

編集2021/01/30 13:57

正しく動作しない

下記コードの if(i >= 2){...} の部分のclearIntervalだけ動作しません。(consoleは動作します)
if(settime < 0){...} のclearIntervalは動作します。
ちなみにiはボタンが押された回数です。
教えて下さいよろしくおねがいします...。

JavaScript

1'use strict'; 2var settime = 900; 3var min; 4var sec; 5var i = 0; 6 7 window.onload = function(){ 8 i = 0; 9 min = 0; 10 sec = 0; 11 chrome.browserAction.setBadgeText({"text": String()}) 12 console.log("window.onloadが読み込まれました"); 13 } 14 15var inter = setInterval(function(){ 16 chrome.tabs.query( {'url': "*"}, function(tabs){ 17 chrome.tabs.sendMessage(tabs[0].id, {message: "back -> content"}, function(item){ 18 19 if(item === true){ 20 console.log(item); 21 timeF(); 22 i += 1; 23 } 24 }) 25 }) 26}, 1000) 27 28 var timeF = function(){ 29 var timeinter = setInterval(function(){ 30 31 min = Math.floor(settime % (24 * 60 * 60) % (60 * 60) / 60); 32 sec = settime % (24 * 60 * 60) % (60 * 60) % 60; 33 settime -= 1; 34 console.log(min + ":" + sec); 35 chrome.browserAction.setBadgeText({"text": String(settime)}); 36 37 if(i >= 2){ 38 console.log(i + "回目"); 39 clearInterval(timeinter); 40 i = 1; 41 settime = 10; 42 } 43 44 if(settime < 0){ 45 console.log("計測終了"); 46 clearInterval(timeinter); 47 settime = 900; 48 i = 0; 49 chrome.browserAction.setBadgeText({"text": String()}) 50 } 51 52 console.log(i); 53 },1000); 54 } 55 56 chrome.runtime.onMessage.addListener(function(request, sender, sendResponse){ 57 if(request.message === "i want min"){ 58 sendResponse(min); 59 } 60 61 if(request.message === "i want sec"){ 62 sendResponse(sec); 63 } 64 });

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

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

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

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

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

plasticgrammer

2021/01/30 13:33 編集

期待する動きはどのようなもので、実際どうなっているのでしょうか。 (動作していないのか、動作していないように見えているだけなのか判断する情報が欲しいです)
WhiteTempest

2021/01/30 13:42 編集

コンソールのログ出力と、 どこで、現在どうなっていて、 本来どうなってほしいのか、 を整理、記載してはいかがでしょうか? 恐らく、clearIntervalにて、 自身の関数のIntervalをリセットしたいのだろうと 推測はしますが。。。 あと、関数は全文乗せた方が良いです。 現在は部分抜粋ですが、各変数が他の関数にてどのように扱われているか分からないため、 根本要因の発見が出来ない可能性があります。
tetro

2021/01/30 14:04

ごめんなさい! いらない部分まで載せてしまうと申し訳ないと思いまして... 今後からは気をつけます! それとやりたいことは、 まず最初にボタンが押される(i = 1) ⇩ 一回目のボタンが押されて、setIntervalが動いている最中にもう一回押される(i = 2) ⇩ 2回目が押されたら今動いているsetIntervalを止めて、settimeの値を初期化する。 という感じです! でも今はiが2以上になっても、settimeの値は変更されるのですがclearIntervalが動きづつけてしまいます。わかりにくかったらすみません!
WhiteTempest

2021/01/30 14:14

interの関数は、いつ呼ばれるのですか?
tetro

2021/01/30 14:48

ボタンが押されたときです! chrome.tabs.query( {'url': "*"}, function(tabs){} でURL指定したサイト(*は仮置き)からボタンが押されたいう情報が別jsファイルから true/false で送られてきます。
WhiteTempest

2021/01/30 14:58

回答出してますので、 一度ご確認ください。
guest

回答1

0

ベストアンサー

まだ推測の域を出ませんが、
inter
の関数は、クリック時にコールされるのではないでしょうか?
その場合、クリックした回数分
timeF()
がコールされることになります。
これの意味は理解出来ますか?

ようするに、
クリックした回数分timeFがコールされる
ということは、
クリックした回数分setIntervalが動く
ということです。

恐らくですが、2回クリックすると
timeInter(1回目)
timeInter(2回目)
とIntervalが動作し、
timeInter(1回目)
でclearIntervalされるが、
timeInter(2回目)
が動く時には、i=1になっているため、
clearされないのでは、ないでしょうか?

解決するのであれば、
inter
の関数内で、
iが0でない時(timeInterが動いていない時)
にtimeF()するようにすべきかと思いますよ。

私の認識違いや不明点ありましたら、
お気軽に追加質問ください。

投稿2021/01/30 14:27

WhiteTempest

総合スコア404

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

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

tetro

2021/01/30 15:16

盲点でした... 試しにclearIntervalを消してみたところ、2回押したら2秒ずつ時間が減っていったので、クリックするたびsetIntervalが動作するみたいです。 また考えてみます! 本当に助かりました!!
WhiteTempest

2021/01/30 15:19

対策も記載してるので、参考にされてくださいね!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問