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

是否可以启动/暂停自动刷新内容？

2 个答案: