定時(shí)器

在 js 里面，有兩種定時(shí)器，倒計(jì)時(shí)定時(shí)器 和 間隔定時(shí)器

倒計(jì)時(shí)定時(shí)器也叫一次性定時(shí)器或者叫延時(shí)定時(shí)器

間隔定時(shí)器也叫間歇定時(shí)器或者叫反復(fù)性定時(shí)器

倒計(jì)時(shí)定時(shí)器

倒計(jì)時(shí)多少時(shí)間以后執(zhí)行函數(shù)

語(yǔ)法： setTimeout(要執(zhí)行的函數(shù)，多長(zhǎng)時(shí)間以后執(zhí)行)

會(huì)在你設(shè)定的時(shí)間以后，執(zhí)行函數(shù)

var timerId = setTimeout(function () {
  console.log('我執(zhí)行了')//1秒后執(zhí)行我執(zhí)行了 只執(zhí)行一次
}, 1000)
console.log(timerId) // 1 這個(gè)1說明頁(yè)面上只有一個(gè)定時(shí)器

時(shí)間是按照毫秒進(jìn)行計(jì)算的，1000 毫秒就是 1秒鐘

所以會(huì)在頁(yè)面打開 1 秒鐘以后執(zhí)行函數(shù)

只執(zhí)行一次，就不在執(zhí)行了

返回值是，當(dāng)前這個(gè)定時(shí)器是頁(yè)面中的第幾個(gè)定時(shí)器

間隔定時(shí)器

每間隔多少時(shí)間就執(zhí)行一次函數(shù)

語(yǔ)法： setInterval(要執(zhí)行的函數(shù)，間隔多少時(shí)間)

var timerId = setInterval(function() {
    console.log('我執(zhí)行了')//間隔1秒執(zhí)行一次 我執(zhí)行了
}, 1000)
console.log(timerId);//1  這個(gè)1說明頁(yè)面上只有一個(gè)定時(shí)器

時(shí)間和剛才一樣，是按照毫秒進(jìn)行計(jì)算的

每間隔 1 秒鐘執(zhí)行一次函數(shù)

只要不關(guān)閉，會(huì)一直執(zhí)行

返回值是，當(dāng)前這個(gè)定時(shí)器是頁(yè)面中的第幾個(gè)定時(shí)器

定時(shí)器的返回值

設(shè)置定時(shí)器的時(shí)候，他的返回值是部分 setTimeout 和 setInterval 的

只要有一個(gè)定時(shí)器，那么就是一個(gè)數(shù)字

var timerId = setTimeout(function () {
  console.log('倒計(jì)時(shí)定時(shí)器')
}, 1000)
var timerId2 = setInterval(function () {
  console.log('間隔定時(shí)器')
}, 1000)
console.log(timerId) // 1
console.log(timerId2) // 2

js的異步代碼執(zhí)行機(jī)制

同步

代碼從上到下依次執(zhí)行, 上一行沒有執(zhí)行完畢, 下一行不會(huì)開始

異步

當(dāng) js 遇到異步代碼的時(shí)候, 會(huì)先拿出來(lái), 放在異步隊(duì)列內(nèi)等待, 暫時(shí)不執(zhí)行

因?yàn)?js 是一個(gè)單線程的代碼, 同時(shí)只能做一個(gè)事情

同步和異步的執(zhí)行時(shí)間

同步代碼優(yōu)先執(zhí)行，執(zhí)行完了同步代碼以后在去執(zhí)行異步代碼。

異步代碼在宿主環(huán)境中執(zhí)行 執(zhí)行完畢以后存放到任務(wù)隊(duì)列中

同步代碼執(zhí)行完畢以后時(shí)間循環(huán)機(jī)制Event loop回去任務(wù)隊(duì)列中調(diào)用異步代碼

把異步任務(wù)添加到執(zhí)行棧中進(jìn)行執(zhí)行

console.log('start')  // start  第一打印出來(lái)的
setTimeout(function() {
    console.log('timeout') //timeout  最后打印出來(lái)的
}, 0)
console.log('end')//end  第二打印出來(lái)的

以上就是JavaScript倒計(jì)時(shí)定時(shí)器和間隔定時(shí)器使用詳解的詳細(xì)內(nèi)容，更多關(guān)于JavaScript定時(shí)器的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論