JavaScript clearIntervalがうまく動作しない

Question

正しく動作しない

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

'use strict';
var settime = 900;
var min;
var sec;
var i = 0;

 window.onload = function(){
   i = 0;
   min = 0;
   sec = 0;
   chrome.browserAction.setBadgeText({"text": String()})
   console.log("window.onloadが読み込まれました");
 }

var inter = setInterval(function(){
  chrome.tabs.query( {'url': "*"}, function(tabs){
    chrome.tabs.sendMessage(tabs[0].id, {message: "back -> content"}, function(item){

      if(item === true){
        console.log(item);
        timeF();
        i += 1;
      }
    })
  })
}, 1000)

 var timeF = function(){
   var timeinter = setInterval(function(){

     min = Math.floor(settime % (24 * 60 * 60) % (60 * 60) / 60);
     sec = settime % (24 * 60 * 60) % (60 * 60) % 60;
     settime -= 1;
     console.log(min + ":" + sec);
     chrome.browserAction.setBadgeText({"text": String(settime)});

     if(i >= 2){
       console.log(i + "回目");
       clearInterval(timeinter);
       i = 1;
       settime = 10;
     }

     if(settime < 0){
       console.log("計測終了");
       clearInterval(timeinter);
       settime = 900;
       i = 0;
       chrome.browserAction.setBadgeText({"text": String()})
     }

     console.log(i);
   },1000);
 }

 chrome.runtime.onMessage.addListener(function(request, sender, sendResponse){
   if(request.message === "i want min"){
     sendResponse(min);
   }

   if(request.message === "i want sec"){
     sendResponse(sec);
   }
 });

Comments

[plasticgrammer]

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

[WhiteTempest]

コンソールのログ出力と、
どこで、現在どうなっていて、
本来どうなってほしいのか、
を整理、記載してはいかがでしょうか？

恐らく、clearIntervalにて、
自身の関数のIntervalをリセットしたいのだろうと
推測はしますが。。。

あと、関数は全文乗せた方が良いです。
現在は部分抜粋ですが、各変数が他の関数にてどのように扱われているか分からないため、
根本要因の発見が出来ない可能性があります。

[tetro]

ごめんなさい！
いらない部分まで載せてしまうと申し訳ないと思いまして...
今後からは気をつけます！
それとやりたいことは、

まず最初にボタンが押される(i = 1)
⇩
一回目のボタンが押されて、setIntervalが動いている最中にもう一回押される(i = 2)
⇩
２回目が押されたら今動いているsetIntervalを止めて、settimeの値を初期化する。

という感じです！
でも今はiが2以上になっても、settimeの値は変更されるのですがclearIntervalが動きづつけてしまいます。わかりにくかったらすみません！

[WhiteTempest]

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

[tetro]

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

[WhiteTempest]

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

Answer 1

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

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

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

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

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

Comments

[tetro]

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

[WhiteTempest]

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