使用jquery重置setInterval函数

时间:2011-12-23 23:27:08

标签: jquery html timer refresh

这是我的代码:

$(document).ready(function() {
    $('#mid_select').live('click', function(e){ 
        $('#middle').load( $(this).attr('href') + ' #middle');
        var page =  $(this).attr("rel");
        alert(page);
        if (page == 'mywall'){
            var auto_refresh = setInterval(function () {
            $('#bottom_middle').load('includes/main_middle_div.php?view=mywall #bottom_middle').fadeIn("slow");}, 5000); 
        } else {
            clearInterval(auto_refresh);     
        }
        e.preventDefault(); 
    }); 
});

我要做的是,如果用户点击ID为#mid_selectrel属性等于“mywall”的链接,则刷新#bottom_middle div每5秒,但如果用户点击rel属性不等于“mypage”的链接,则不要每5秒刷新一次#bottom_middle div。一直无法弄清楚如何完成这项工作,帮助任何人?

1 个答案:

答案 0 :(得分:2)

您必须存储对setInterval超时外部点击处理程序的引用(使用var)。此外,您必须确保一次最多循环一个间隔。调整后的代码如下所示符合以下条件:

$(document).ready(function() {
    var auto_refresh = false;   // Store this variable OUTSIDE the click handler
    $('#mid_select').live('click', function(e){
        var $this = $(this);
        $('#middle').load( $this.attr('href') + ' #middle');
        var page =  $this.attr("rel");
        alert(page);
        if (page == 'mywall'){
            // Check whether an instance is already running...
            if (auto_refresh === false) {
                // NO var, because we use the auto_refresh var in the parent scope
                auto_refresh = setInterval(function () {
            $('#bottom_middle').load('includes/main_middle_div.php?view=mywall #bottom_middle').fadeIn("slow");
                }, 5000); 
        } else {
            // Clear interval, and explicitly set it to true
            clearInterval(auto_refresh);
            auto_refresh = false;
        }
        e.preventDefault(); 
    }); 
});