jQuery - 如何使用clearInterval将其关闭后重新启动setInterval？

问题描述：

我想用2个按钮'STAY'和'Leave'创建一个页面。按钮下方有一个iFrame。当页面首次加载时，iFrame在10秒后自动开始刷新。当用户点击STAY按钮时，它将停止刷新。之后，如果他点击LEAVE按钮，iFrame将在10秒后再次开始刷新。我使用这个代码：jQuery - 如何使用clearInterval将其关闭后重新启动setInterval？

$(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？

答

我认为你需要拉出函数作用域之外的设置间隔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 
}

什么clearInterval究竟是做什么的？ – 2011-02-13 20:42:57

它停止间隔计时器。 'setInterval'启动间隔定时器，每10秒调用一次'update'函数。 'clearInterval'调用会停止该定时器。 – rcravens 2011-02-13 20:44:32

因此，如果我们在4秒内调用clearInterval，下次再次调用setInterval函数时会使用这6秒吗？ – 2011-02-13 20:47:49

答

首先，你不能在#leave点击功能定义一个变量，在#stay点击功能使用它。

使用方法如下：

var refreshIntervalId = null; 

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

答

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

Tricker的例子：

var refreshIntervalId = null; 

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

有时整个文档并不需要访问的变量，所以你想要把它在函数中。

jQuery - 如何使用clearInterval将其关闭后重新启动setInterval？

相关推荐