JavaScript倒計時定時器和間隔定時器使用詳解
定時器
在 js 里面，有兩種定時器，倒計時定時器 和 間隔定時器
倒計時定時器也叫一次性定時器或者叫延時定時器
間隔定時器也叫間歇定時器或者叫反復(fù)性定時器
倒計時定時器
倒計時多少時間以后執(zhí)行函數(shù)
語法： setTimeout(要執(zhí)行的函數(shù)，多長時間以后執(zhí)行)
會在你設(shè)定的時間以后，執(zhí)行函數(shù)
var timerId = setTimeout(function () {
console.log('我執(zhí)行了')//1秒后執(zhí)行我執(zhí)行了 只執(zhí)行一次
}, 1000)
console.log(timerId) // 1 這個1說明頁面上只有一個定時器時間是按照毫秒進(jìn)行計算的，1000 毫秒就是 1秒鐘
所以會在頁面打開 1 秒鐘以后執(zhí)行函數(shù)
只執(zhí)行一次，就不在執(zhí)行了
返回值是，當(dāng)前這個定時器是頁面中的第幾個定時器
間隔定時器
每間隔多少時間就執(zhí)行一次函數(shù)
語法： setInterval(要執(zhí)行的函數(shù)，間隔多少時間)
var timerId = setInterval(function() {
console.log('我執(zhí)行了')//間隔1秒執(zhí)行一次 我執(zhí)行了
}, 1000)
console.log(timerId);//1 這個1說明頁面上只有一個定時器時間和剛才一樣，是按照毫秒進(jìn)行計算的
每間隔 1 秒鐘執(zhí)行一次函數(shù)
只要不關(guān)閉，會一直執(zhí)行
返回值是，當(dāng)前這個定時器是頁面中的第幾個定時器
定時器的返回值
設(shè)置定時器的時候，他的返回值是部分 setTimeout 和 setInterval 的
只要有一個定時器，那么就是一個數(shù)字
var timerId = setTimeout(function () {
console.log('倒計時定時器')
}, 1000)
var timerId2 = setInterval(function () {
console.log('間隔定時器')
}, 1000)
console.log(timerId) // 1
console.log(timerId2) // 2js的異步代碼執(zhí)行機(jī)制
同步
代碼從上到下依次執(zhí)行, 上一行沒有執(zhí)行完畢, 下一行不會開始
異步
當(dāng) js 遇到異步代碼的時候, 會先拿出來, 放在異步隊列內(nèi)等待, 暫時不執(zhí)行
因?yàn)?js 是一個單線程的代碼, 同時只能做一個事情
同步和異步的執(zhí)行時間
同步代碼優(yōu)先執(zhí)行，執(zhí)行完了同步代碼以后在去執(zhí)行異步代碼。
異步代碼在宿主環(huán)境中執(zhí)行 執(zhí)行完畢以后存放到任務(wù)隊列中
同步代碼執(zhí)行完畢以后時間循環(huán)機(jī)制Event loop回去任務(wù)隊列中調(diào)用異步代碼
把異步任務(wù)添加到執(zhí)行棧中進(jìn)行執(zhí)行
console.log('start') // start 第一打印出來的
setTimeout(function() {
console.log('timeout') //timeout 最后打印出來的
}, 0)
console.log('end')//end 第二打印出來的以上就是JavaScript倒計時定時器和間隔定時器使用詳解的詳細(xì)內(nèi)容，更多關(guān)于JavaScript定時器的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
JS關(guān)鍵字變色實(shí)現(xiàn)思路及代碼
JS關(guān)鍵字變色詳細(xì)很多朋友都很想實(shí)現(xiàn)吧接下來將執(zhí)行以下幾個步驟：1.替換關(guān)鍵字，對字體變色2.用正則，CSS背景變色;該方法可結(jié)合前臺JS調(diào)用，感興趣的朋友可以參考下，希望可以幫助到你2013-02-02
這篇文章主要是對Javascript變量作用域進(jìn)行了詳細(xì)的分析介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
到現(xiàn)在，我們就有討論 JavaScript 中的原型和繼承問題的基礎(chǔ)了。它雖然并不像你在 C++、Java 或 C# 中了解的經(jīng)典繼承模式一樣，但這種方式同樣強(qiáng)大，并且有可能會更加靈活2014-07-07
基于JavaScript實(shí)現(xiàn)猜數(shù)字游戲代碼實(shí)例
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)猜數(shù)字游戲代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-07-07
JavaScript中Window對象stop()方法用于停止頁面載入,該方法類似在瀏覽器上點(diǎn)擊停止載入按鈕,如果頁面在載入圖片或框架(iframe)時間過長,我門可以使用該方法來停止載入,可以應(yīng)用在判斷頁面載入時間,過長就不加載特效2023-09-09
JavaScript中清空數(shù)組的方法總結(jié)
本文給大家總結(jié)了三種js清空數(shù)組的方法，每種方法都與眾不同，非常不錯，具有參考借鑒價值，感興趣的朋友一起看看吧2016-12-12
本文主要介紹了JavaScript過濾關(guān)鍵字的方法。具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
JS實(shí)現(xiàn)JSON轉(zhuǎn)TypeScript接口的核心步驟
這篇文章詳細(xì)介紹了如何使用在線工具將JSON數(shù)據(jù)轉(zhuǎn)換為TypeScript接口代碼的全過程,工具通過輸入清洗、JSON解析、類型名生成、類型推斷、對象轉(zhuǎn)聲明文本等步驟,最終生成可讀性強(qiáng)且準(zhǔn)確的TypeScript代碼,需要的朋友可以參考下2026-02-02
JavaScript接口實(shí)現(xiàn)方法實(shí)例分析
這篇文章主要介紹了JavaScript接口實(shí)現(xiàn)方法,結(jié)合實(shí)例形式詳細(xì)分析了JavaScript接口實(shí)現(xiàn)原理、操作步驟與相關(guān)注意事項(xiàng),需要的朋友可以參考下2020-05-05
javascript語句中的CDATA標(biāo)簽的意義
javascript語句中的CDATA標(biāo)簽的意義...2007-05-05