clearTimeout（）停止しないsetTimeout

Question

私はJavascriptで（HTMLフォームからの入力に基づいて）本当に単純なタイマーを作成しようとしています。私のclearTimeoutは動作していません - 私が持っているconsole.log 。私のHTMLでは、clearTimeoutを呼び出すために、私は持っています。なぜこれがうまくいかないのか分かりません。どんな助けでも大歓迎です！ありがとう！

function settimer(){ 

hour = document.getElementById('h').value; 
minute = document.getElementById('m').value; 
sec = document.getElementById('s').value; 

hour = hour * 3600000; 
minute = minute * 60000; 
sec = sec * 1000; 
totalTime = hour+minute+sec; 

var timer = setTimeout(function(){alert("Time's up"); }, totalTime); 
} 

    function clear(){ 
    console.log("stopped") 
    clearTimeout(timer); 
    } 

Answer 1

あなたは関数内であなたのtimer変数を宣言しているので、スコープはその関数への唯一の地元であるのです。関数の外で呼び出すことはできません。これを修正するには、変数を関数外に移動します。

関数定義の外で宣言された変数はグローバル変数であり、その値はアクセス可能でプログラム全体で変更可能です。

関数定義内で宣言された変数はローカルです。関数が実行されるたびに作成され破棄され、以外のコードではにアクセスすることはできません。

ここでは、Mozillaの開発者向けネットワーク

https://msdn.microsoft.com/library/bzt2dkta(v=vs.94).aspx

まずからの文書はそれをローカルスコープを与え、任意の関数の外timerとtotal_time変数を宣言しています。

var timer; 
var total_time; 

ここで、タイマーを設定する関数を作成します。これらの変数をスコープのローカルにするには、varキーワードを使用します。

function setTimer(){ 

    var hour = +(document.getElementById('h').value) * 3600000; 
    var minute = +(document.getElementById('m').value) * 60000; 
    var sec = +(document.getElementById('s').value) * 1000; 

    totalTime = hour + minute + sec; // Assign total time to variable 
    alert("Time's up"); 
} 

setTimeoutにtimerの値を割り当てます。今度は、totalTime変数を時間として使用できます。

timer = setTimeout(setTimer, totalTime); 

ローカルスコープが指定されているため、タイマーを停止できるようになりました。

function clear() { 
    console.log("stopped") 
    clearTimeout(timer); 
} 

これで動作するはずです。もう一回やってみよう。

Answer 2

を使用する場合、timerは、settimer()のローカル変数として宣言され、関数の本体の内部にのみ存在します。

両方の関数がその関数へのアクセスを共有できるようにするには、変数をその関数の外側で宣言する必要があります。 settimer()は依然としてそれに割り当てることができますが、clear()もそれにアクセスできます。

// declare variable in surrounding scope 
var timer; 

function settimer() { 
    // ... 

    // assign to declared variable 
    timer = setTimeout(function(){alert("Time's up"); }, totalTime); 
} 

function clear(){ 
    console.log("stopped") 
    clearTimeout(timer); 
} 

---

注：彼らは唯一settimer()内部で必要しているので、他の変数は、使用されているが、地元の人々のように宣言する必要があります。

function settimer() { 
    var hour = document.getElementById('h').value; 
    var minute = document.getElementById('m').value; 
    var sec = document.getElementById('s').value; 

    hour = hour * 3600000; 
    minute = minute * 60000; 
    sec = sec * 1000; 

    var totalTime = hour+minute+sec; 

    // ... 
} 

本当に宣言していないと、自動的にグローバル変数になります。

関連：これまでWhat is the function of the var keyword and when to use it (or omit it)?

Answer 3

シンプルなソリューション。時、分、秒の値をハードコードしましたが、いつでも希望の場所から取得できます。

var totalTime;

function settimer(){ 

    hour = 0; 
    minute = 0; 
    sec = 2; 

    hour = hour * 3600000; 
    minute = minute * 60000; 
    sec = sec * 1000; 
    totalTime = hour+minute+sec; 

}; 

settimer(); 

var timer = setTimeout(function(){ 
    alert("Time's up"); 
    clear(); 
    }, totalTime); 




    function clear(){ 
    console.log("stopped") 
    clearTimeout(timer); 
    } 

Answer 4

あなたは、関数のtimer外を揚げるか、外部関数によってアクセスできるように、それをグローバル変数をレンダリングvarでそれを宣言せずにtimerをインスタンス化することができます。