一个页面定时刷新及控制暂停刷新的功能实现

需求

页面定时每隔1分钟刷新一次，人工可以控制点击暂停后，停止间隔刷新，再次点击后，继续间隔时间刷新。

实现

先上一个效果图

上图就是，点击暂停和继续的切换控制。

实现具体编码如下

页面代码

<div style="float:right;padding-right:10px;">
  <i class="fa fa-bolt" onclick="toggole_refresh_onoff(this)" style="padding-right:5px;"></i> 
  <span id="d_refresh">60</span>
</div>

 javascript脚本部分

var i_second=60,refresh_en=1;//默认为能刷新
$J(function(){
  var interval =setInterval(function(){ refresh_interval(); }, 1000);
  if(refresh_en==0){ clearInterval(interval ); } 
 });
//间隔刷新
function refresh_interval(){
  if(refresh_en==1){
    $J("#d_refresh").html(i_second--); if(i_second==0){ location.reload(); }
  }
}
//切换显示刷新开关
function toggole_refresh_onoff(a_ele){
  var v_classnames=$J(a_ele).attr('class');
  if(v_classnames.indexOf("fa-bolt") != -1){
    $J(a_ele).removeClass("fa-bolt").addClass("fa-ban"); refresh_en=0;}
  if(v_classnames.indexOf("fa-ban") != -1){
    $J(a_ele).removeClass("fa-ban").addClass("fa-bolt"); refresh_en=1;}
}