JS定時(shí)器實(shí)現(xiàn)數(shù)值從0到10來(lái)回變化
效果:數(shù)值從0到10來(lái)回變化
代碼:
var a=0 var timer1,timer2; function add(){ a++; console.log(a); if(a>=10){ clearInterval(timer1); timer2=setInterval(sub,200); } } function sub(){ a--; console.log(a); if(a<=0){ clearInterval(timer2); timer1=setInterval(add,200); } } timer1=setInterval(add,200);
----------分割線------------------------
此效果看似簡(jiǎn)單,但是實(shí)際寫(xiě)的時(shí)候發(fā)現(xiàn)JS定時(shí)器有一些不易察覺(jué)的坑,一不小心就會(huì)造成定時(shí)器疊加,導(dǎo)致變化越來(lái)越快,直到變化間隔達(dá)到瀏覽器的極限(chrome的為5ms)。值得注意的是,雖然每次都用clearInterval把timer清楚掉了,但是每次新的循環(huán)還是會(huì)使timer的值在原有基礎(chǔ)上加1
以上所述是小編給大家介紹的JS定時(shí)器實(shí)現(xiàn)數(shù)值從0到10來(lái)回變化,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
你必須知道的Javascript知識(shí)點(diǎn)之"深入理解作用域鏈"的介紹
本篇文章小編為大家介紹,你必須知道的Javascript知識(shí)點(diǎn)之"深入理解作用域鏈"的介紹。需要的朋友參考下2013-04-04JavaScript函數(shù)及其prototype詳解
這篇文章主要介紹了JavaScript函數(shù)及其prototype詳解的相關(guān)資料,需要的朋友可以參考下2023-03-03JSON+HTML實(shí)現(xiàn)國(guó)家省市聯(lián)動(dòng)選擇效果
實(shí)現(xiàn)國(guó)家省市聯(lián)動(dòng)的方法有很多,本文要為大家介紹的JSON+HTML如何實(shí)現(xiàn),需要的朋友可以參考下2014-05-05原生js實(shí)現(xiàn)html手機(jī)端城市列表索引選擇城市
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)html手機(jī)端城市列表索引選擇城市,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-06-06將Echarts圖表導(dǎo)出為圖片的3種方法總結(jié)
這篇文章主要給大家介紹了關(guān)于將Echarts圖表導(dǎo)出為圖片的3種方法,Echarts是一種基于JavaScript的可視化庫(kù),用于創(chuàng)建豐富、交互式的圖表和地圖,而Excel是一種電子表格軟件,用于數(shù)據(jù)處理和分析,需要的朋友可以參考下2023-06-06淺談js中同名函數(shù)和同名變量的執(zhí)行問(wèn)題
下面小編就為大家?guī)?lái)一篇淺談js中同名函數(shù)和同名變量的執(zhí)行問(wèn)題。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02JS動(dòng)態(tài)創(chuàng)建元素的兩種方法
這篇文章主要為大家詳細(xì)介紹了JS動(dòng)態(tài)創(chuàng)建元素的兩種方法,字符串拼接形式,或是使用Document、Element對(duì)象自帶的一些函數(shù) ,需要的朋友可以參考下2016-04-04