タイマー終了時に複数回ポップアップするアラートウィンドウ

Question

JSを使用して簡単なタイマーを作成しています。タイマーが0になると、「タイムアップ」したいポップアップする。

$(document).ready(function() { 
    updateClock(); 
    var timeInterval = setInterval(updateClock(), 1000); 
}); 

var ms = 5000; 

function updateClock() { 
    ms -= 1000; 
    var minutes = Math.floor(ms/1000/60); 
    var seconds = Math.floor((ms/1000) % 60); 
    $('#minutes').html(minutes); 
    $('#seconds').html(seconds); 
    if (ms <= 0) { 
     alert('Time is up!'); 
     clearInterval(timeInterval); 
    }; 
} 

今すぐアラートが複数回ポップアップします。私は、開発者コンソールを開く誤っ-とき、私はclearInterval()を使用しているからだと疑う、それは言う：

"Uncaught ReferenceError: timeInterval is not defined at updateClock."

はしかし、私はそれが正しく機能するために変更することはよく分かりません。

Answer 1

MDN docによると：

var intervalID = window.setInterval(func, delay[, param1, param2, ...]);

var intervalID = window.setInterval(code, delay);

：

func

 A function to be executed every delay milliseconds. 

を

これはつまり、あなたのような最初のパラメータでこの関数を呼び出す場合：

updateClock() 

updateClock機能が実行され、結果コードがのsetInterval関数に返されます。しかし、そのような関数（すなわち、updateClock）は未定義を返すので、setIntervalは次回の実行に何も持たない。他の問題については

（例：ローカル変数）あなたは、このようにグローバル関数として「時間間隔」変数を宣言することがあります。

window.timeInterval = setInterval(updateClock, 1000); 

これはグローバルvariaable（すなわちの値を保証します。時間間隔を）はすぐにタイマーハンドラで使用できます。

例：

$(document).ready(function() { 
 
    window.timeInterval = setInterval(updateClock, 1000); 
 
}); 
 

 
var ms = 10000; 
 

 
function updateClock() { 
 
    ms -= 1000; 
 
    var minutes = Math.floor(ms/1000/60); 
 
    var seconds = Math.floor((ms/1000) % 60); 
 
    $('#minutes').text(minutes); 
 
    $('#seconds').text(seconds); 
 
    if (ms <= 0) { 
 
    setTimeout(function() { // this to refresh before alert 
 
     alert('Time is up!'); 
 
    }, 10); 
 
    clearInterval(timeInterval); 
 
    }; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<span id="minutes">0</span>:<span id="seconds">10</span>

あなたは彼らのために検索する代わりにするたびに、あなたの分と秒のDOM要素をもキャッシュすることがあります

$(document).ready(function() { 
 
    var minObj = $('#minutes'); 
 
    var secObj = $('#seconds') 
 
    window.timeInterval = setInterval(function() { 
 
    updateClock(minObj, secObj); 
 
    }, 1000); 
 
}); 
 

 
var ms = 10000; 
 

 
function updateClock(minObj, secObj) { 
 
    ms -= 1000; 
 
    var minutes = Math.floor(ms/1000/60); 
 
    var seconds = Math.floor((ms/1000) % 60); 
 
    minObj.text(minutes); 
 
    secObj.text(seconds); 
 
    if (ms <= 0) { 
 
    setTimeout(function() { // this to refresh before alert 
 
     alert('Time is up!'); 
 
    }, 10); 
 
    clearInterval(timeInterval); 
 
    }; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<span id="minutes">0</span>:<span id="seconds">10</span>

Answer 2

あなたの変数timeIntervalが$(document).ready(...)

の内側に、この試してみてくださいです：

var timeInterval; 

$(document).ready(function() { 
    updateClock(); 
    timeInterval = setInterval(updateClock(), 1000); 
}); 

var ms = 5000; 

function updateClock() { 
    ms -= 1000; 
    var minutes = Math.floor(ms/1000/60); 
    var seconds = Math.floor((ms/1000) % 60); 
    $('#minutes').html(minutes); 
    $('#seconds').html(seconds); 
    if (ms <= 0) { 
     alert('Time is up!'); 
     clearInterval(timeInterval); 
    }; 
}