setInterval()和clearInterval() 用法
一、含義(摘自百度百科)
setInterval() 方法可按照指定的周期(以毫秒計)來調用函數或計算表達式。 setInterval() 方法會不停地調用函數,直到 clearInterval() 被調用或視窗被關閉。 由 setInterval() 傳回的 ID 值可用作 clearInterval() 方法的參數。
二、需求
項目中首頁需求:增加時間倒計時控件,5分鐘重新整理前台資料。
三、找時間控件JS
找了好久,jquery_countdown,flipcountdown 這兩種網上應用的時間倒計時插件比較多,融入工程不好融合,我選擇用純JS來實作首頁倒計時。
找到一款JS寫的時間倒計時,給大家分享一下連接配接:http://pan.baidu.com/s/1i3ITKYL
四、遇到問題
setInterval 一直循環增加,導緻時間倒計時js開啟了好幾個線程,秒數一直在 --。晚上都是js外部進行調用setInterval 如何關閉 js。不知道如何内部關閉。搜尋到這個文章參考一下:http://www.jb51.net/article/35474.htm 問題得以解決。
五、總結
在不了解setInterval 用法之前,沒有好好的研究最初的用法 ,w3c一帶而過,http://www.w3school.com.cn/jsref/met_win_setinterval.asp 其實這句話就能解決我的問題“由 setInterval() 傳回的 ID 值可用作 clearInterval() 方法的參數。”。要好好看基礎知識,多多實踐。 我的代碼示例:
//倒計時總秒數量
var secondsTotal = parseInt(300);
//時間倒計時函數
function Countdown(sec)
{
var i = window.setInterval(function()
{
var day=0,
hour=0,
minute=0,
second=0;//時間預設值
if(sec > 0)
{
minute = Math.floor(sec / 60) - (day * 24 * 60) - (hour * 60);
second = Math.floor(sec) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
}
if (minute <= 9) minute = '0' + minute;
if (second <= 9) second = '0' + second;
$('#minute_show').html('<s></s>'+minute+'分');
$('#second_show').html('<s></s>'+second+'秒');
sec--;
if(sec==0)
{
clearInterval(i);
}
}, 1000);
}
//每5分鐘更新一次頁面
setInterval(updateHallShow,1000 * 60 * 5);
效果展示: