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);
}