JS定時(shí)器實(shí)現(xiàn)數(shù)值從0到10來回變化
更新時(shí)間：2016年12月09日 08:56:12 作者：likequiet
最近做項(xiàng)目遇到一需求要求實(shí)現(xiàn)數(shù)值從0到10來回變化，下面小編給大家分享下實(shí)現(xiàn)代碼，需要的朋友參考下
效果：數(shù)值從0到10來回變化
代碼：
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);
----------分割線------------------------
此效果看似簡單，但是實(shí)際寫的時(shí)候發(fā)現(xiàn)JS定時(shí)器有一些不易察覺的坑，一不小心就會(huì)造成定時(shí)器疊加，導(dǎo)致變化越來越快，直到變化間隔達(dá)到瀏覽器的極限（chrome的為5ms）。值得注意的是，雖然每次都用clearInterval把timer清楚掉了，但是每次新的循環(huán)還是會(huì)使timer的值在原有基礎(chǔ)上加1
以上所述是小編給大家介紹的JS定時(shí)器實(shí)現(xiàn)數(shù)值從0到10來回變化，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
小程序根目錄下的 app.json 文件是小程序的全局配置文件,本文給大家分享微信小程序之全局配置window和tabBar案例講解,感興趣的朋友跟隨小編一起看看吧2024-01-01
UniApp使用vue.config.js進(jìn)行配置的詳細(xì)教程
這篇文章主要給大家介紹了關(guān)于UniApp使用vue.config.js進(jìn)行配置的詳細(xì)教程,uniapp是一套基于Vue語法的框架,同樣也支持Vue.config.js配置,一般常用的莫過于路徑的名稱,需要的朋友可以參考下2023-10-10
jQuery實(shí)現(xiàn)動(dòng)態(tài)生成表格并為行綁定單擊變色動(dòng)作的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)動(dòng)態(tài)生成表格并為行綁定單擊變色動(dòng)作的方法,涉及jQuery頁面元素遍歷與事件動(dòng)態(tài)響應(yīng)相關(guān)操作技巧,需要的朋友可以參考下2017-04-04
下面小編就為大家?guī)硪黄钊肜斫鈐s函數(shù)的作用域與this指向。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05
通過js隨機(jī)函數(shù)Math.random實(shí)現(xiàn)亂序
這篇文章主要介紹了通過js隨機(jī)函數(shù)Math.random實(shí)現(xiàn)亂序,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-05-05
極力推薦10個(gè)短小實(shí)用的JavaScript代碼段
這篇文章主要為大家極力推薦10個(gè)短小實(shí)用的JavaScript代碼段，幫助大家節(jié)省大量開發(fā)時(shí)間，感興趣的小伙伴們可以參考一下2016-08-08
Bootstrap實(shí)現(xiàn)可折疊分組側(cè)邊導(dǎo)航菜單
這篇文章主要介紹了Bootstrap實(shí)現(xiàn)可折疊分組側(cè)邊導(dǎo)航菜單的相關(guān)資料,需要的朋友可以參考下2018-03-03
flash javascript之間的通訊方法小結(jié)
不用getURL和fsCommand方法個(gè)國外的通信方法，值得一看2008-12-12
使用JavaScript實(shí)現(xiàn)等比縮放的幾種常見方法
這篇文章主要介紹了如何使用JavaScript對HTML中的元素和任意DOM元素進(jìn)行等比縮放,通過獲取容器或元素的尺寸信息,計(jì)算縮放比例,并應(yīng)用CSS變換（transform屬性）來實(shí)現(xiàn)等比縮放,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-01-01
D3.js 實(shí)現(xiàn)帶伸縮時(shí)間軸拓?fù)鋱D的示例代碼
這篇文章主要介紹了D3.js 實(shí)現(xiàn)帶伸縮時(shí)間軸拓?fù)鋱D的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01