js中setInterval和setTimeout使用總結(jié)

setIntrval動作的語法格式

setInterval動作的作用:間歇調(diào)用
是在播放動畫時,每隔一定事件就調(diào)用函數(shù),方法或者對象,可以使用本動作更新來自數(shù)據(jù)庫的變量,或者更新時間顯示

setInterval(function,interval[,arg1,arg2...argn])
setInterval(object,methoName,interval[,arg1,arg2,...argn])

第一種格式是標準動作面板中setInterval函數(shù)默認語法,第二種格式是在 專家模式動作中使用的方法

其中的functuon函數(shù)一個函數(shù)名或者一個對匿名函數(shù)的引用.object參數(shù)指定從object對象派生的對象,methodName制定object參數(shù)中藥調(diào)用的方法

interval制定對function或methodName調(diào)用兩次之間的時間枪汪,單位是毫秒梯皿。后面的arg1等是可選的參數(shù)暑诸,用于制定傳遞給function或是methodName的參數(shù)。

setInterval它設(shè)置的時間間隔小于動畫幀速(如每秒10幀峰搪,相當于100毫秒)岔冀,則按照盡可能接近interval的時間間隔調(diào)用函數(shù)。

而且必須使用updateAfterEvent動作來確保以足夠的頻率刷新屏幕概耻。如果interval大于動畫幀速使套,則只用在每次播放頭進入某一幀是才調(diào)用,以減小每次刷新屏幕的影響鞠柄。

下面的例子每隔1秒調(diào)用一次匿名函數(shù)侦高。

setInterval(function(){
console.log("每隔1秒鐘我就會顯示一次")},1000);
//這里的function(){}是沒有函數(shù)名的函數(shù)。成為匿名函數(shù)厌杜,后面的1000是時間間隔奉呛,單位是毫秒。

下面的例子為我們展示如何帶參數(shù)運行夯尽。

window.onload=function(){
function show1(){
    console.log("每隔1秒顯示一次");
}
function show2(str){
    console.log(str);
}
setInterval(show1,1000);
setInterval(show2,2000,"每隔2秒我就會顯示一次");
//后面表示的是調(diào)用的具體字符串
}

效果

setInterval.png

上面已經(jīng)將函數(shù)的setInterval方法介紹了侧馅。
下面我們將介紹對象的setInterval方法。

首先呐萌,寫一個setInterval在動作中調(diào)用對象的方法的例子,該例子不需要傳遞參數(shù)谊娇。

myobj=new Object();//創(chuàng)建一個新的對象
myobj.interval=function){
    trace("每隔1秒顯示一次");
}//創(chuàng)建對象的方法肺孤。
setInterval(myobj,"interval",1000);//設(shè)定時間間隔調(diào)用對象的方法罗晕。

接下來介紹如何傳遞參數(shù)。其實道理和函數(shù)的傳遞參數(shù)是一樣的赠堵。

myobj=new Object();
myobj.interval-function(str){
    trace(str);
}
setInterval(myobj,"interval",2000," 每隔2秒我就會顯示一次");

注意小渊。要調(diào)用為對象定義的方法時,必須在專家模式中使用第二種語法格式茫叭。

這樣子的話呢酬屉,我們來作一個動態(tài)顯示時間的畫面∽岢睿可以用下面的代碼實現(xiàn)呐萨。

window.onload=function(){
setInterval(show,1000);
function show(){
    time=new Date();
    hour=time.getHours();
    minu=time.getMinutes();
    sec=time.getSeconds();
    datetime=hour+":"+minu+":"+sec;
    console.log(datetime);
}
}//這里的datetime是一個動態(tài)文本框的變量名字。

效果

time.png

這樣子呢莽囤,setInterval這個方法大家應(yīng)該學(xué)的很好了∶粒現(xiàn)在呢,我們學(xué)習clearInterval.

clearInterval動作

clearInterval動作的作用是清楚對setInterval函數(shù)的調(diào)用朽缎,它的語法格式如下

clearInterval(intervalid);
//intervalid是調(diào)用setInterval函數(shù)后返回的對象惨远。

下面舉一個簡單的例子。

function show(){
   console.log("每隔一秒顯示一次");
}
var sh;
sh=setInterval(show,1000);
clearInterval(sh);

setInterval動作

作用:超時調(diào)用
它接受兩個參數(shù):要執(zhí)行的代碼和以毫秒表示的時間(即在執(zhí)行代碼前需要等待多少毫秒)话肖。其中第一個參數(shù)可以是一個包含JS代碼的字符串(就和在 eval() 函數(shù)中使用的字符串一樣)北秽,也可以是一個函數(shù)。第二個參數(shù)表示等待多長時間的毫秒數(shù)最筒,但經(jīng)過該事件后指定的代碼 不一定會執(zhí)行 贺氓。

這是因為JS是一個單線程序的解釋器,一定時間內(nèi)只能執(zhí)行一段代碼是钥,為了控制要執(zhí)行的代碼就有一個JS任務(wù)隊列掠归,這些任務(wù)會按照將他們添加到隊列的順序執(zhí)行。

setTimeout()的第二個參數(shù)告訴JS再過多長時間把當前任務(wù)添加到隊列中悄泥。若隊列為空虏冻,這段添加的代碼會立即執(zhí)行,若不為空弹囚,就要等前面的代碼執(zhí)行完再執(zhí)行

//不建議傳遞字符串厨相!可能會導(dǎo)致性能損失
setimeout("alert('hellow world!')",1000);
//推薦以匿名函數(shù)調(diào)用方式
var timeoutId = setTimeout(function(){
    alert("hellow world!");      
},1000);

clearTimeout(timeoutId);

調(diào)用setTimeout()之后,該方法會返回一個數(shù)值ID鸥鹉,ID是計劃執(zhí)行代碼的唯一標示符蛮穿,可以通過clearTimeout(ID)來取消 未執(zhí)行 的超時調(diào)用.

和setInterval進行對比

setTimeout()只執(zhí)行一次,如果要多次調(diào)用毁渗,可以使用setInterval(),或者自身多次調(diào)用setTimeout()

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末践磅,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子灸异,更是在濱河造成了極大的恐慌府适,老刑警劉巖羔飞,帶你破解...
    沈念sama閱讀 222,681評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異檐春,居然都是意外死亡逻淌,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評論 3 399
  • 文/潘曉璐 我一進店門疟暖,熙熙樓的掌柜王于貴愁眉苦臉地迎上來卡儒,“玉大人,你說我怎么就攤上這事俐巴」峭” “怎么了?”我有些...
    開封第一講書人閱讀 169,421評論 0 362
  • 文/不壞的土叔 我叫張陵窜骄,是天一觀的道長锦募。 經(jīng)常有香客問我,道長邻遏,這世上最難降的妖魔是什么糠亩? 我笑而不...
    開封第一講書人閱讀 60,114評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮准验,結(jié)果婚禮上赎线,老公的妹妹穿的比我還像新娘。我一直安慰自己糊饱,他們只是感情好垂寥,可當我...
    茶點故事閱讀 69,116評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著另锋,像睡著了一般滞项。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上夭坪,一...
    開封第一講書人閱讀 52,713評論 1 312
  • 那天文判,我揣著相機與錄音,去河邊找鬼室梅。 笑死戏仓,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的亡鼠。 我是一名探鬼主播赏殃,決...
    沈念sama閱讀 41,170評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼间涵!你這毒婦竟也來了仁热?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,116評論 0 277
  • 序言:老撾萬榮一對情侶失蹤勾哩,失蹤者是張志新(化名)和其女友劉穎股耽,沒想到半個月后根盒,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,651評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡物蝙,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,714評論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了敢艰。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片诬乞。...
    茶點故事閱讀 40,865評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖钠导,靈堂內(nèi)的尸體忽然破棺而出震嫉,到底是詐尸還是另有隱情,我是刑警寧澤牡属,帶...
    沈念sama閱讀 36,527評論 5 351
  • 正文 年R本政府宣布票堵,位于F島的核電站,受9級特大地震影響逮栅,放射性物質(zhì)發(fā)生泄漏悴势。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,211評論 3 336
  • 文/蒙蒙 一措伐、第九天 我趴在偏房一處隱蔽的房頂上張望特纤。 院中可真熱鬧,春花似錦侥加、人聲如沸捧存。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽昔穴。三九已至,卻和暖如春提前,著一層夾襖步出監(jiān)牢的瞬間吗货,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評論 1 274
  • 我被黑心中介騙來泰國打工岖研, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留卿操,地道東北人。 一個月前我還...
    沈念sama閱讀 49,299評論 3 379
  • 正文 我出身青樓孙援,卻偏偏與公主長得像害淤,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子拓售,可洞房花燭夜當晚...
    茶點故事閱讀 45,870評論 2 361

推薦閱讀更多精彩內(nèi)容

  • 摘要:在寫H5游戲時經(jīng)常需要使用定時刷新頁面實現(xiàn)動畫效果窥摄,比較常用即setTimeout()以及setInterv...
    亂蓬頭199302閱讀 1,523評論 0 3
  • JavaScript提供定時執(zhí)行代碼的功能,叫做定時器(timer)础淤,主要由setTimeout()和setInt...
    晚晴幽草閱讀 1,659評論 1 18
  • 一崭放、JS前言 (1)認識JS 也許你已經(jīng)了解HTML標記(也稱為結(jié)構(gòu))哨苛,知道了CSS樣式(也稱為表示),會使用HT...
    凜0_0閱讀 2,777評論 0 8
  • 第1章 認識JS JavaScript能做什么币砂?1.增強頁面動態(tài)效果(如:下拉菜單建峭、圖片輪播、信息滾動等)2.實現(xiàn)...
    mo默22閱讀 1,306評論 0 5
  • 第1章 系好安全帶,準備啟航 1.1讓你認識JS 1.1.1 JavaScript能做什么决摧?增強頁面動態(tài)效果(...
    張中華閱讀 1,374評論 4 10