javascript - コンテンツの自動更新を開始/一時停止することはできますか?

Question

このスクリプトを使用して、コンテンツを 10 秒ごとに自動更新しています。

var auto_refresh = setInterval(
function ()
{
$('#stats').load('stats.php').fadeIn("slow");
}, 10000);

ただし、更新を開始および一時停止するには、開始/一時停止ボタンを追加する必要があります。どうやってやるの ？

Answer 1

setInterval()一般的な意味では、フラグを追加することで、任意の一時停止効果を得ることができます。

var paused = false,
    auto_refresh = setInterval(function (){
       if (paused) return false;
       $('#stats').load('stats.php').fadeIn("slow");
    }, 10000);

$("#idOfPauseButton").click(function() {
    paused = !paused;
    this.value = paused ? "Restart" : "Pause";
});

この方法はclearInterval()、一時停止setInterval()してから再開するよりも簡単だと思います。

明らかに、これは単一のボタンを使用して一時停止/再開することを前提としています。

<input id="idOfPauseButton" value="Pause" type="button">

デモ: http://jsfiddle.net/nnnnnn/NWa56/

Answer 2

これを試すこともできます：

HTML

<button onclick="int=Stop();">Pause</button>
<button onclick="int=Start();">Start</button>

JS

var int = Start();

function Start() {
    // Start Loading the content
    var auto_refresh = setInterval(
    function () {
        $('#stats').load('stats.php').fadeIn("slow");
    }, 10000);
    return auto_refresh;
}

function Stop() {
    // Stop loading the content
    // The ID value returned by setInterval() is used as 
    // the parameter for the clearInterval() method.
    return clearInterval(int);
}