JQuery 自动刷新（setInterval）答案

【问题标题】：JQuery auto refresh (setInterval)JQuery 自动刷新（setInterval）
【发布时间】：2016-08-15 22:40:09
【问题描述】：

大家好，不知道最好的方法是什么 - 即在哪里放置 if's .. 我有一个加载页面的 div 并有一个 setInterval() 函数。

在加载的页面上有 1 个按钮，我想要实现的是单击按钮 #1（加载的页面）以停止 setInterval() 并附加一个新的 div（绝对位置）直到按钮 #2（在附加的 div) 被点击然后重新启动它。 .. 理解？

这是我的“基本”代码

这是第一个按钮的动作

 $('.replybutton').live('click',function(){
    $('.discussion').append('<div class="replyarea">some content in here plus "button number2</div>');
    });

这会加载页面 - 最初

$('.discussion').load('board2.php');

这是刷新功能

var auto_refresh = setInterval(
function()
    {
    $('.discussion').fadeOut().load('board2.php').fadeIn();

    }, 10000);

失败 - （但不是首选）我可以在加载的页面上使用切换而不是 $('.replybutton').live('click',function() 中使用的附加，但仍然需要停止刷新并重新启动它 - 基于切换，但我强调切换的想法不是首选方式。

【问题讨论】：

标签： jquery toggle setinterval

【解决方案1】：

我在 JSFiddle 为您创建了一个示例。在这里查看：http://jsfiddle.net/7YYV7/。

代码

var intervalId = 0;
intervalId = setInterval(fadeDiscussion, 3000);

$(function() {
    $('input[name=click]').bind('click', function() {
        clearInterval(intervalId);     

        $('.discussion').append('<div class="replyarea">some content in here plus <input type="button" name="save" value="save"></div>');    
    });

    $('input[name=save]').live('click', function() {
         intervalId = setInterval(fadeDiscussion, 3000);   
    });
});

var i = 1;
function fadeDiscussion () {
    console.log(i);
    $('.discussion').fadeOut().fadeIn();
    i++;
}

【讨论】：

【解决方案2】：

我认为您正在寻找的是函数clearInterval()。这将允许您根据间隔 id 删除间隔（在您的情况下为 auto_refresh）。

这里是文档：https://developer.mozilla.org/en/DOM/window.clearInterval

现在您可以将回调包装在一个命名函数中：

var reload = function(){
    $('.discussion').fadeOut().load('board2.php').fadeIn();
};

var auto_refresh = setInterval(reload, 10000);

$('button').click(function(){
    clearInterval(auto_refresh);
});

【讨论】：