JavaScript定時(shí)器setTimeout、setInterval怎么使用

本篇內(nèi)容主要講解“JavaScript定時(shí)器setTimeout、setInterval怎么使用”，感興趣的朋友不妨來看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“JavaScript定時(shí)器setTimeout、setInterval怎么使用”吧!

定時(shí)器：按我個(gè)人理解來說就是固定某個(gè)時(shí)間后，時(shí)間到了，就提醒我時(shí)間到了。

程序中的定時(shí)器：相當(dāng)于倒計(jì)時(shí)，也相當(dāng)于計(jì)時(shí)器。作用是在設(shè)定的某個(gè)時(shí)間后，執(zhí)行特定的方法。

我們先來了解一下setTimeout定時(shí)器，他的特點(diǎn)就是只能用一次，也稱為一次性定時(shí)器。

setTimeout( func, time, argument1, argument2, .... )；
語法解析： 
  1、func：固定時(shí)間后執(zhí)行的方法
  2、time：設(shè)置固定的時(shí)間-按毫秒計(jì)算
  3、argument：傳入方法的參數(shù)

案例：

    setTimeout(function(name,gender){
        console.log(name + " is " + gender);
    }, 1000, "Tom", "boy");

簡(jiǎn)寫：

    setTimeout((name,gender) => {
        console.log(name + " is " + gender);
    }, 1000, "Tom", "boy");

案例解析：
開啟了一個(gè)一次性定時(shí)器，1秒后執(zhí)行我給定的函數(shù)。

接著看看 setInterval定時(shí)器，他的特點(diǎn)就是可以重復(fù)執(zhí)行給定的函數(shù)。

console.log("1 ===>");

setTimeout(function(name,gender){
    console.log(name + " is " + gender);
}, 1000, "Tom", "boy");

console.log("2 ===>");

執(zhí)行結(jié)果：
> "1 ===>"
> "2 ===>"
> "Tom is boy"

接下來就開始圈重點(diǎn)了：

定時(shí)器概念了解了，也會(huì)造定時(shí)器了，那這個(gè)定時(shí)器什么時(shí)候調(diào)用呢，因?yàn)槲覀兊?javaScript代碼是從上到下，逐行執(zhí)行，那到了定時(shí)器這行我們的進(jìn)程會(huì)不會(huì)等定時(shí)器執(zhí)行完了再執(zhí)行定時(shí)器后面的代碼呢？答案是不會(huì)等！

遇到定時(shí)器，會(huì)將定時(shí)器加入到任務(wù)隊(duì)列中(宏任務(wù))，等所有代碼執(zhí)行完了，程序會(huì)看一下隊(duì)列中還有什么沒有完成的 ，如果有沒完成的，就執(zhí)行一下。

這樣說可能有點(diǎn)抽象，看下案例好了。

console.log("1 ===>");

setTimeout(function(name,gender){
    console.log(name + " is " + gender);
}, 1000, "Tom", "boy");

console.log("2 ===>");

執(zhí)行結(jié)果：
> "1 ===>"
> "2 ===>"
> "Tom is boy"

注意：任務(wù)隊(duì)列里的執(zhí)行順序是按先來后到的

接下來再深入理解一下，我們先思考一個(gè)問題，一次性定時(shí)器和重復(fù)性定時(shí)器區(qū)別在哪，不可能就只是調(diào)一次和調(diào)多次這么簡(jiǎn)單吧。

提醒：接下來的內(nèi)容比較重要，有點(diǎn)抽象但需要理解透徹

案例：假設(shè)我們需要每隔一秒控制臺(tái)輸出一句話。

結(jié)合我們本文的學(xué)習(xí)，給出思路：

1、一次性定時(shí)器的函數(shù)里再調(diào)定時(shí)器，形成循環(huán)。

2、開啟一個(gè)重復(fù)性定時(shí)器

編寫實(shí)現(xiàn)代碼：

思路1:

setTimeout(function run(name,gender){
  console.log(" hello");
  setTimeout(run,1000);
}, 1000);

思路2:

setInterval(()=>{
	console.log("hello")
},1000);

看到這大家可能會(huì)不禁感嘆，就這？就這？這哪復(fù)雜了，逗我呢。

那不妨思考一下，第二個(gè)一次性定時(shí)器啥時(shí)候開始執(zhí)行呢？第三個(gè)呢？第n個(gè)呢？程序運(yùn)行的第n秒？

那我稍微改造一下剛剛的案例好了

let start = Date.now(); // 程序一運(yùn)行的時(shí)間
let times = []; // 用來記錄運(yùn)行時(shí)間的數(shù)組

let sTime = setInterval(()=>{
  times.push(Date.now() - start); // 記錄下執(zhí)行時(shí)間
  if (start + 5000 < Date.now()) {
    console.log(times);
  }
},1000);

接著可以思考一下輸出的結(jié)果是什么。

然后再來思考重復(fù)性定時(shí)器，第二次函數(shù)調(diào)用是啥時(shí)候執(zhí)行呢？第三個(gè)呢？第n個(gè)呢？

再稍微改造一下好了

let start = Date.now(); // 程序一運(yùn)行的時(shí)間
let times = []; // 用來記錄運(yùn)行時(shí)間的數(shù)組

let sTime = setInterval(()=>{
  times.push(Date.now() - start); // 記錄下執(zhí)行時(shí)間
  if (start + 5000 < Date.now()) {
    console.log(times);
  }
},1000);

好了，留些時(shí)間思考一下…

思考好了嗎，好了的話一起揭曉一下答案吧。

第一種情況：
> "1 ===>"
> "2 ===>"
> "1 ===>"
> "2 ===>"

第二種情況：
> Array [1001, 2003, 3003, 4000, 5000, 6000]

分析：
情況1:思考這個(gè)問題就可 -> 輸出 "1 ===>" 之后我開啟了另一個(gè)定時(shí)器，此時(shí)是不是應(yīng)該再輸出"1 ===>"？

然后就進(jìn)入了定時(shí)器循環(huán)，結(jié)果一直只有"1 ===>"？

結(jié)合我們的結(jié)果，可以發(fā)現(xiàn)下一個(gè)定時(shí)器是什么時(shí)候開的？沒錯(cuò)，執(zhí)行完第一個(gè)定時(shí)器函數(shù)內(nèi)的代碼后再執(zhí)行的。

情況2:根據(jù)時(shí)間的間隔很容易知道時(shí)間就是1秒上下幾毫秒，所以下一個(gè)定時(shí)器是第一個(gè)定時(shí)器時(shí)間結(jié)束后立即開啟的。

這就是他們兩個(gè)比較靠底層的區(qū)別。

總結(jié)的話就留給大家自己總結(jié)吧，畢竟一千個(gè)讀者就會(huì)有一千個(gè)讀者(哈哈，開個(gè)玩笑，說句可能像話的話????)。

現(xiàn)在我們已經(jīng)大致了解了定時(shí)器以及觸發(fā)時(shí)間，那么會(huì)造定時(shí)器了不會(huì)取消就有點(diǎn)說不過去了,下面一起看看怎么取消定時(shí)器。

let timerId1 = setTimeout(...);
clearTimeout(timerId1); // 取消一次性定時(shí)器，timeId1 是唯一且必傳參數(shù)

let timerId2 = setInterval(...)；
clearInterval(timerId2)。 // 取消重復(fù)定時(shí)器，timeId2 是唯一且必傳參數(shù)

注意：定時(shí)器開啟了一定要關(guān)閉，要做到有始有終，不然會(huì)一直消耗內(nèi)存，到時(shí)候就就很容易程序崩潰。

還有一個(gè)留最后講的，因?yàn)楸容^細(xì)節(jié)。

下面我們來看個(gè)案例

let start = Date.now();
let times = [];

setTimeout(function run() {
  times.push(Date.now() - start); // 保存前一個(gè)調(diào)用的延時(shí)

  if (start + 50 < Date.now()) console.log(times); // 100 毫秒之后，顯示延時(shí)信息
  else setTimeout(run); // 否則重新調(diào)度
});

結(jié)果：

> Array [1, 2, 4, 5, 9, 13, 18, 22, 27, 32, 36, 42, 46, 50, 55]

let start = Date.now(); // 程序一運(yùn)行的時(shí)間
let times = []; // 用來記錄運(yùn)行時(shí)間的數(shù)組

let sTime = setInterval(()=>{
  times.push(Date.now() - start); // 記錄下執(zhí)行時(shí)間
  if (start + 50 < Date.now()) {
    console.log(times);
    clearInterval(sTime); // 清除定時(shí)器
  }
});

結(jié)果：

> Array [1, 2, 3, 4, 8, 13, 16, 20, 25, 28, 32, 36, 40, 44, 48, 53]

到此，相信大家對(duì)“JavaScript定時(shí)器setTimeout、setInterval怎么使用”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！