定時(shí)器：基礎(chǔ)認(rèn)知

Martin91 發(fā)布于2019-08-19 18:40 / 3614人閱讀

摘要：因?yàn)橐淮涡远〞r(shí)器只執(zhí)行一次，所以確認(rèn)需要調(diào)用時(shí)，不需要去清除?？偨Y(jié)使用定時(shí)器時(shí)優(yōu)先選用一次性定時(shí)器，鏈?zhǔn)秸{(diào)用來實(shí)現(xiàn)周期性定時(shí)器的效果。注意定時(shí)器的任務(wù)函數(shù)添加進(jìn)任務(wù)隊(duì)列和執(zhí)行順序。

定時(shí)器 定時(shí)器概念

是程序按指定的時(shí)間間隔（反復(fù)）自動(dòng)的執(zhí)行一項(xiàng)任務(wù)

定時(shí)器方法屬于window對(duì)象
如果在該方法中使用this，this的值在非嚴(yán)格模式下返回的是window對(duì)象，在嚴(yán)格模式下返回的是undefined。

分為一次性定時(shí)器和周期性定時(shí)器

一次性定時(shí)器

setTimeout()，接收兩個(gè)參數(shù)：要執(zhí)行的代碼和以毫秒表示的時(shí)間，只在等待時(shí)間到達(dá)后執(zhí)行一次

第一個(gè)參數(shù)可以是一段包含JavaScript代碼的字符串（和使用eval()方法的字符串相同），也可以是一個(gè)函數(shù)，建議使用函數(shù)作為參數(shù)

第二個(gè)參數(shù)表示等待時(shí)間，但需要特別注意的是，經(jīng)過該段時(shí)間后，代碼不一定執(zhí)行。（定時(shí)器執(zhí)行順序會(huì)導(dǎo)致一些問題）

setTimeout(function(){
    alert(‘hello world’);
},100);
//或者
setTimeout(“alert(‘hello world’)”,100);

清除一次性定時(shí)器：
setTimeout()方法每次被調(diào)用都會(huì)返回一個(gè)新的數(shù)值，連續(xù)不重復(fù),作為該方法的唯一標(biāo)識(shí)符，如果需要取消一次性定時(shí)器，可以在執(zhí)行前設(shè)置clearTimeout()。

var timeoutId=setTimeout(function(){alert(‘hello world’)},1000);
clearTimeout(timeoutId);//在未調(diào)用之前清除了定時(shí)器

只要在指定的時(shí)間之前設(shè)置clearTimeout()就可以讓一次性定時(shí)器不執(zhí)行。因?yàn)橐淮涡远〞r(shí)器只執(zhí)行一次，所以確認(rèn)需要調(diào)用時(shí)，不需要去清除。

周期性定時(shí)器

setInterval()，接收的參數(shù)類型和一次性定時(shí)器相同，按照指定的時(shí)間間隔（第二個(gè)參數(shù)）去重復(fù)執(zhí)行代碼，直到該定時(shí)器被取消或頁面被卸載。

清除周期性定時(shí)器

var i=0;
var timerID=setInterval(function(){
    console.log(i);
    i+=1;
    if (i>10){clearInterval(timerID)}
},100);

同一次性定時(shí)器相同，都會(huì)返回一個(gè)唯一標(biāo)識(shí)符，在該定時(shí)器未停止之前，這個(gè)唯一標(biāo)識(shí)符是不變的，下次被重新調(diào)用，會(huì)返回另一個(gè)不同的數(shù)值。在達(dá)到清除條件時(shí)，設(shè)置clearInterval()，因?yàn)橹芷谛远〞r(shí)器會(huì)一直執(zhí)行下去，所以必須設(shè)置清除。

定時(shí)器與調(diào)用隊(duì)列

瀏覽器是多線程程序，可同時(shí)執(zhí)行多個(gè)任務(wù)，但，JavaScript是一個(gè)單線程的解釋器，一個(gè)時(shí)刻只能執(zhí)行一項(xiàng)任務(wù)。
為了控制要執(zhí)行的代碼，就有一個(gè)JavaScript任務(wù)隊(duì)列，這些任務(wù)會(huì)按它們添加到隊(duì)列的順序執(zhí)行，定時(shí)器的任務(wù)函數(shù)會(huì)在前面代碼執(zhí)行完之后才執(zhí)行，所以會(huì)存在等待時(shí)間超過設(shè)定的時(shí)間的情況。

例子

for(var i=0;i<3;i++){
    setTimeout("console.log(i)",0);
}
    //3,3,3

在控制臺(tái)中輸入以上代碼，會(huì)輸出三個(gè)3，原因是當(dāng)瀏覽器讀到定時(shí)器時(shí)，只是把任務(wù)函數(shù)加入了回調(diào)隊(duì)列，但必須在主程序（for循環(huán)）執(zhí)行完后才會(huì)執(zhí)行，而主程序執(zhí)行完后，i的值為3，然后調(diào)用已經(jīng)在任務(wù)隊(duì)列中等待的三個(gè)定時(shí)器任務(wù)函數(shù)，則都輸出相同的3。

一次性定時(shí)器和周期性定時(shí)器的比較 一次性定時(shí)器模擬周期性定時(shí)器

var i=0
setTimeout(function(){
    if (i<10){                           //設(shè)置任務(wù)函數(shù)執(zhí)行條件
        console.log(i);
        i+=1;
        setTimeout(arguments.callee,100);//鏈?zhǔn)秸{(diào)用一次性定時(shí)器
    }
},100)

使用一次性定時(shí)器時(shí)，不必跟蹤定時(shí)器ID，因?yàn)槊看螆?zhí)行代碼后，如果不再設(shè)置另一次調(diào)用，定時(shí)器就會(huì)自動(dòng)停止。

由于一次性定時(shí)器是在當(dāng)前任務(wù)函數(shù)執(zhí)行完之后，才開始執(zhí)行下一次定時(shí)器函數(shù)，所以定時(shí)器中所設(shè)置的間隔時(shí)間是從當(dāng)前任務(wù)函數(shù)執(zhí)行完之后開始計(jì)算的，這一點(diǎn)和周期性定時(shí)器不同。

周期性定時(shí)器模擬一次性定時(shí)器

var timerID=setInterval(function(){
    alert("hello world");
    clearInterval(timerID);
},100);

必須設(shè)置定時(shí)器清除，否則周期性定時(shí)器會(huì)一直執(zhí)行下去。

周期性定時(shí)器中的時(shí)間間隔是指每隔某段時(shí)間就調(diào)用一次，而不管每次執(zhí)行任務(wù)函數(shù)花費(fèi)多長(zhǎng)時(shí)間，如果任務(wù)函數(shù)執(zhí)行時(shí)間超過了設(shè)定的時(shí)間間隔，就會(huì)發(fā)生錯(cuò)誤。

總結(jié)

使用定時(shí)器時(shí)優(yōu)先選用一次性定時(shí)器，鏈?zhǔn)秸{(diào)用setTimeout來實(shí)現(xiàn)周期性定時(shí)器的效果。

注意定時(shí)器的任務(wù)函數(shù)添加進(jìn)任務(wù)隊(duì)列和執(zhí)行順序。

GPU云服務(wù)器云服務(wù)器認(rèn)知美學(xué) 實(shí)名認(rèn)知認(rèn)知心理學(xué)圖像識(shí)別認(rèn)知科學(xué)對(duì)人工智能

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/79848.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

Martin91

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

【數(shù)據(jù)結(jié)構(gòu)初階之二叉樹】：二叉樹相關(guān)的性質(zhì)和經(jīng)典的習(xí)題（用C語言實(shí)現(xiàn)，附圖詳解）

閱讀 1911·2021-11-24 09:39
?? 前端如何與后端對(duì)接？當(dāng)年差點(diǎn)和后端同學(xué)打起來了！

閱讀 2575·2021-10-14 09:43
BuyVM：$2/月起,AMD Ryzen+NVMe+1Gbps無限流量,KVM架構(gòu),拉斯維加斯/紐

閱讀 3333·2021-10-08 10:10
服務(wù)器主機(jī)有什么用-服務(wù)器主機(jī)干什么用的？

閱讀 2355·2021-09-22 15:54
【每日一包0012】to-camel-case,to-no-case,to-space-case

閱讀 2354·2019-08-29 17:20
用 CSS 實(shí)現(xiàn)三角形與平行四邊形

閱讀 1585·2019-08-28 18:14
《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法》筆記——第2章數(shù)組

閱讀 2385·2019-08-26 13:28
關(guān)于原型簡(jiǎn)單的了解

閱讀 1128·2019-08-26 12:16

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

定時(shí)器：基礎(chǔ)認(rèn)知

相關(guān)文章

websocket初步認(rèn)知

Easyswoole 源碼學(xué)習(xí)和個(gè)人解析目錄

Windows Containers 大冒險(xiǎn): 啟程

用計(jì)算解決科學(xué)難題，用算法讓生活變得更好

發(fā)表評(píng)論

0條評(píng)論

Martin91

男|高級(jí)講師

TA的文章

【數(shù)據(jù)結(jié)構(gòu)初階之二叉樹】：二叉樹相關(guān)的性質(zhì)和經(jīng)典的習(xí)題（用C語言實(shí)現(xiàn)，附圖詳解）

?? 前端如何與后端對(duì)接？當(dāng)年差點(diǎn)和后端同學(xué)打起來了！

BuyVM：$2/月起,AMD Ryzen+NVMe+1Gbps無限流量,KVM架構(gòu),拉斯維加斯/紐

服務(wù)器主機(jī)有什么用-服務(wù)器主機(jī)干什么用的？

【每日一包0012】to-camel-case,to-no-case,to-space-case

用 CSS 實(shí)現(xiàn)三角形與平行四邊形

《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法》筆記——第2章數(shù)組

關(guān)于原型簡(jiǎn)單的了解

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

定時(shí)器：基礎(chǔ)認(rèn)知

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！