是否可以使用 ON/OFF 按钮控制刷新网页？答案

【问题标题】：Can refreshing a web page be controlled using ON/OFF button?是否可以使用 ON/OFF 按钮控制刷新网页？
【发布时间】：2013-01-12 15:54:39
【问题描述】：

我的页面中有一个自动刷新按钮。当我单击 Auto Refresh ON 时，页面应重新加载，而选择 Auto Refresh OFF 则不应重新加载。这可能吗？

这是我的自动刷新按钮功能：

$('#refresh').click(function(){
   if($('#refresh').attr('class') == 'refresh-off'){
      $('#refresh').addClass('refresh-on');
   }
    else{
      $('#refresh').removeClass('refresh-on');
   }
   });
});

【问题讨论】：

重新加载页面的代码在哪里？不清楚重新加载是如何工作的

标签： jquery ajax refresh

【解决方案1】：

尝试设置一个计时器，然后检查#refresh 的类。如果设置，则刷新页面。

这个fiddle 显示它以 10 秒的间隔工作。

var int=self.setInterval(function(){refreshPage()},10000);

$(document).ready(function() {

  var hashTag = window.location.href.split('#');
  if (hashTag[1] == 'reload') {
     $('#refresh').addClass('refresh-on').html('Refresh On');  
  }

  $('#refresh').on('click', function() { 
    $(this).toggleClass('refresh-on'); 
    if ($(this).hasClass('refresh-on'))
      $(this).html('Refresh On');
    else 
      $(this).html('Refresh Off');
  });

});

function refreshPage() {
  if ($('#refresh').hasClass('refresh-on')) {
    location.hash = 'reload';
    window.location.reload();
  } else
      location.hash = '';
}

【讨论】：

感谢您的帮助！！！但是页面正在两个类中加载（'refresh-on' 和 'refresh-off'）
@RajeshPandian 我的错 - 删除 if 语句末尾的分号，您应该会发现它按预期工作。
谢谢！！！当页面重新加载时，自动刷新打开关闭:(有什么办法可以手动切换而不是自动切换？？
我已经调整了答案，为 URL 添加了标签。如果设置了标签，则 #refresh 添加了类。
太好了 - 感谢您告知我们。如果您想要更加离散，您可以做同样的事情，但使用 cookie 而不是主题标签 - 逻辑将完全相同，只需读取和写入 cookie，而不是主题标签。 Here is a good guide.

【解决方案2】：

是的，应该可以这样做。由于您将自己控制刷新，也许您可以通过在 URL 中添加 GET 参数来指示自动刷新正在执行中。这意味着当您重新加载网页时，您的脚本应该检查是否有一个名为 refresh 的 GET 参数并对其进行操作。

http://www.yourdomain.com/?refresh[=auto]

【讨论】：

【解决方案3】：

设置定时器刷新：

var timerId;
$(document).ready(function() {
    timerId = setInterval("location.reload(true)", 300000);
});

比清除刷新命令

clearInterval(timerId);

完整代码：

var timerId;
$('#refresh').click(function(){
   if($('#refresh').attr('class') == 'refresh-off'){
      $('#refresh').addClass('refresh-on');
      timerId = setInterval("location.reload(true)", 300000);
   }
    else{
      $('#refresh').removeClass('refresh-on');
      clearInterval(timerId);
   }
   });
});

【讨论】：