快捷導(dǎo)航

JS之延時(shí)器和定時(shí)器執(zhí)行示例詳解

更新時(shí)間：2023年07月10日 11:00:34 作者：瑟聞風(fēng)傾

這篇文章主要為大家介紹了JS之延時(shí)器和定時(shí)器執(zhí)行示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

1. 延時(shí)器setTimeout：延時(shí)執(zhí)行一次

setTimeout("function",time) 設(shè)置一個(gè)超時(shí)對(duì)象，該方法接收一個(gè)id表示一個(gè)定時(shí)器

var timer1 = setTimeout(function(){},1000);  //timer1->1 (當(dāng)前是第一個(gè)定時(shí)器)

clearTimeout(對(duì)象) 清除已設(shè)置的setTimeout對(duì)象：由 setTimeout() 返回的 ID 值可用作 clearInterval() 方法的參數(shù)

clearTimeout(timer1); //清除定時(shí)器

或

clearTimeout(1); //清除第一個(gè)定時(shí)器

setTimeout使一段代碼在指定時(shí)間后運(yùn)行，僅運(yùn)行一次

2. 定時(shí)器setInterval：定時(shí)重復(fù)執(zhí)行

setInterval("function",time) 設(shè)置一個(gè)超時(shí)對(duì)象，該方法返回一個(gè)id表示一個(gè)定時(shí)器

var timer2 = setInterval(function(){},1000);  //timer2-&gt;2 (當(dāng)前是第二個(gè)定時(shí)器)

clearInterval(對(duì)象) 清除已設(shè)置的setInterval對(duì)象：由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的參數(shù)

clearInterval(timer2);//清除定時(shí)器

或

clearInterval(2);//清除第二個(gè)定時(shí)器

setInterval使一段代碼每過指定時(shí)間就運(yùn)行一次，自動(dòng)重復(fù)

總結(jié)：

兩種方法根據(jù)不同的場景和業(yè)務(wù)需求擇而取之，一般情況下setTimeout用于延遲執(zhí)行某方法或功能，

setInterval則一般用于刷新表單，對(duì)于一些表單的假實(shí)時(shí)指定時(shí)間刷新同步。

setInterval會(huì)產(chǎn)生回調(diào)堆積，特別是時(shí)間很短的時(shí)候，一般不用setInterval，而用setTimeout的延時(shí)遞歸來代替interval。

很多人習(xí)慣于將setTimeout包含于被執(zhí)行函數(shù)中，然后在函數(shù)外再次使用setTimeout來達(dá)到定時(shí)執(zhí)行的目的，這樣，函數(shù)外的setTimeout在執(zhí)行函數(shù)時(shí)再次觸發(fā)setTimeout，從而形成周而復(fù)始的定時(shí)效果。使用的時(shí)候各有各的優(yōu)勢，使用setInterval，需要手動(dòng)停止。而使用方法中嵌套setTimeout，可以根據(jù)方法內(nèi)部本身的邏輯不再調(diào)用setTimeout就等于停止了觸發(fā)。其實(shí)兩個(gè)東西完全可以相互模擬，具體使用那個(gè)，看當(dāng)時(shí)的需要而定了。

示例：

var intervalId = setInterval(function(){
    console.log("love");
},1000);
setTimeout(function(){
    console.log("yaya");
    clearInterval(intervalId);
},5000);  
console.log("yang");

運(yùn)行結(jié)果：