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說明頁面上只有一個定時器時間是按照毫秒進行計算的，1000 毫秒就是 1秒鐘
所以會在頁面打開 1 秒鐘以后執(zhí)行函數(shù)
只執(zhí)行一次，就不在執(zhí)行了
返回值是，當前這個定時器是頁面中的第幾個定時器
間隔定時器
每間隔多少時間就執(zhí)行一次函數(shù)
語法： setInterval(要執(zhí)行的函數(shù)，間隔多少時間)
var timerId = setInterval(function() {
console.log('我執(zhí)行了')//間隔1秒執(zhí)行一次 我執(zhí)行了
}, 1000)
console.log(timerId);//1 這個1說明頁面上只有一個定時器時間和剛才一樣，是按照毫秒進行計算的
每間隔 1 秒鐘執(zhí)行一次函數(shù)
只要不關(guān)閉，會一直執(zhí)行
返回值是，當前這個定時器是頁面中的第幾個定時器
定時器的返回值
設(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í)行機制
同步
代碼從上到下依次執(zhí)行, 上一行沒有執(zhí)行完畢, 下一行不會開始
異步
當 js 遇到異步代碼的時候, 會先拿出來, 放在異步隊列內(nèi)等待, 暫時不執(zhí)行
因為 js 是一個單線程的代碼, 同時只能做一個事情
同步和異步的執(zhí)行時間
同步代碼優(yōu)先執(zhí)行，執(zhí)行完了同步代碼以后在去執(zhí)行異步代碼。
異步代碼在宿主環(huán)境中執(zhí)行 執(zhí)行完畢以后存放到任務(wù)隊列中
同步代碼執(zhí)行完畢以后時間循環(huán)機制Event loop回去任務(wù)隊列中調(diào)用異步代碼
把異步任務(wù)添加到執(zhí)行棧中進行執(zhí)行
console.log('start') // start 第一打印出來的
setTimeout(function() {
console.log('timeout') //timeout 最后打印出來的
}, 0)
console.log('end')//end 第二打印出來的以上就是JavaScript倒計時定時器和間隔定時器使用詳解的詳細內(nèi)容，更多關(guān)于JavaScript定時器的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
JavaScript數(shù)據(jù)結(jié)構(gòu)與算法
這篇文章主要介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)與算法，文章圍繞主題展開數(shù)據(jù)結(jié)構(gòu)與算法的概念，以及幾種常見的數(shù)據(jù)結(jié)構(gòu)是什么，有什么優(yōu)點和缺，具有一定的參考價值，需要的小伙伴可以參考一下2022-07-07
這篇文章主要介紹了JS關(guān)鍵字球狀旋轉(zhuǎn)效果的實例代碼。需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
JavaScript資源預(yù)加載組件和滑屏組件的使用推薦
這篇文章主要介紹了JavaScript資源預(yù)加載組件和滑屏組件的使用推薦,分別為preload和slide的用法講解,使用起來非常簡單,需要的朋友可以參考下2016-03-03
js中小數(shù)向上取整數(shù),向下取整數(shù),四舍五入取整數(shù)的實現(xiàn)(必看篇)
下面小編就為大家?guī)硪黄猨s中小數(shù)向上取整數(shù),向下取整數(shù),四舍五入取整數(shù)的實現(xiàn)(必看篇)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
很多語言中都有塊級作用域，但JS沒有，它使用var聲明變量，以function來劃分作用域，大括號“{}” 卻限定不了var的作用域，下面這篇文章主要給大家介紹了關(guān)于ES6學(xué)習(xí)教程之塊級作用域的相關(guān)資料，需要的朋友可以參考下。2017-10-10
這篇文章主要介紹了JS簡單實現(xiàn)移動端日歷功能的方法,涉及javascript針對日期與時間的操作及顯示相關(guān)技巧,需要的朋友可以參考下2016-12-12
JavaScript輸出所選擇起始與結(jié)束日期的方法
這篇文章主要介紹了JavaScript輸出所選擇起始與結(jié)束日期的方法,涉及javascript結(jié)合HTML5元素操作日期運算的相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2017-07-07
這篇文章主要介紹了避免調(diào)試代碼導(dǎo)致IE出錯的方法,需要的朋友可以參考下2014-04-04
這篇文章主要介紹了javascript計算漸變顏色的實例的相關(guān)資料,希望通過本文能幫助到大家，讓大家理解掌握這部分內(nèi)容，需要的朋友可以參考下2017-09-09
淺談SpringMVC中post checkbox 多選框value的值(隱藏域方式)
下面小編就為大家分享一篇淺談SpringMVC中post checkbox 多選框value的值(隱藏域方式)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01