Question

我想创建一个包含2个按钮的页面，'STAY'和'Leave'。按钮下方有一个iFrame。当页面第一次加载时，iFrame会在10秒后自动开始刷新。当用户点击STAY按钮时，它将停止刷新。之后，如果他点击LEAVE按钮，iFrame将在10秒后再次开始刷新。我正在使用此代码：

$(document).ready(function() {
    var refreshIntervalId = setInterval( "update()", 10000 );

    $('#leave').click(function () {
        var refreshIntervalId = setInterval( "update()", 10000 );;
    })

    $('#stay').click(function () {
        clearInterval(refreshIntervalId);
    })
});

function update(){
    var url = "load.php";
    $('iframe#ifrm').attr('src', url);
}

<div id="bar">
    <div class= "button" id="stay">
    <a>Stay</a>
    </div>
    <div class= "button" id="leave">
    <a>Leave</a>
    </div>
</div>

但它不起作用，我是否以错误的方式使用clearInterval？

Answer 1

我认为您需要将设置间隔ID拉出函数范围之外。

var refreshIntervalId;
$('#leave').click(function () {
        refreshIntervalId = setInterval( update, 10000 );
        })
$('#stay').click(function () {
           clearInterval(refreshIntervalId);
        })
});

也许对refreshIntervalId变量进行一些验证检查......

if(refreshIntervalId!=null){
   // Do something with the interval id
}

Answer 2

首先，您无法在#leave点击功能中定义变量，并在#stay点击功能中使用它。

像这样使用：

var refreshIntervalId = null;

$('#leave').click(function () {
    refreshIntervalId = setInterval( "update()", 10000 );
})
$('#stay').click(function () {
   clearInterval(refreshIntervalId);
})

Answer 3

这是一个范围问题。这意味着无论何时放置“var”定义哪些函数都可以访问变量。如果在Tricker的示例中定义所有函数之外的变量，则文档中的任何函数都可以访问该值。

Tricker先前发布的示例：

var refreshIntervalId = null;

$('#leave').click(function () {
    refreshIntervalId = setInterval( "update()", 10000 );
})
$('#stay').click(function () {
   clearInterval(refreshIntervalId);
})

有时整个文档不需要访问变量，因此您希望将其放在函数中。

jQuery - 如何在使用clearInterval将其终止后重新启动setInterval？

3 个答案: