天天看點

setInterval()和clearInterval() 用法 setInterval()和clearInterval() 用法

setInterval()和clearInterval() 用法

一、含義(摘自百度百科)

setInterval() 方法可按照指定的周期(以毫秒計)來調用函數或計算表達式。 setInterval() 方法會不停地調用函數,直到 clearInterval() 被調用或視窗被關閉。 由 setInterval() 傳回的 ID 值可用作 clearInterval() 方法的參數。

二、需求

項目中首頁需求:增加時間倒計時控件,5分鐘重新整理前台資料。

三、找時間控件JS

      找了好久,jquery_countdown,flipcountdown 這兩種網上應用的時間倒計時插件比較多,融入工程不好融合,我選擇用純JS來實作首頁倒計時。

找到一款JS寫的時間倒計時,給大家分享一下連接配接:http://pan.baidu.com/s/1i3ITKYL         

setInterval()和clearInterval() 用法 setInterval()和clearInterval() 用法

四、遇到問題

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);
           

效果展示:

setInterval()和clearInterval() 用法 setInterval()和clearInterval() 用法

繼續閱讀