首頁猿問關(guān)于定時(shí)器的問題

關(guān)于定時(shí)器的問題

JavaScript

qq_已是回憶為何要苦苦追尋_03352366 2017-01-10 12:39:10

????var i = 1;?? ??? ?var timer = setInterval(function() {? ?? ??? ?i++; //3 4 5 6?? ??? ?console.log(i);?? ??? ??? ?}, 1000);當(dāng)i=1的時(shí)候 console.log（i）----3 4 5 6 7....當(dāng)I=0的時(shí)候瀏覽器直接卡死是為什么？我還是不太了解這個(gè)定時(shí)器有沒有明白的========================================================================<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>無標(biāo)題文檔</title><style>ul { margin:0; padding:0;}li { list-style:none;}#wrap { width:300px; height:200px; padding:20px;}ul { width:300px; height:30px;}ul li { width:70px; height:30px; line-height:30px; text-align:center; background:#69F; float:left; cursor:pointer;}img { width:230px; height:170px; float:left;}a { display:inline-block; width:70px; height:40px; line-height:40px; color:#000; text-align:center; background:#CCC; text-decoration:none;}.active1 { background:#FF3;}.active2 { background:#069;}</style></head><body><div id="wrap">?? ?<ul>?? ??? ?<li>菜單一</li>??????? <li>菜單二</li>??? </ul>??? <img src="" />??? <a href="#"></a>??? <a href="#"></a>??? <a href="#"></a></div><script>?? ?var oUl=document.getElementsByTagName("ul")[0];?? ?var oLi=document.getElementsByTagName("li");?? ?var oImg=document.getElementsByTagName("img")[0];?? ?var aHref=document.getElementsByTagName("a");?? ?var arrText1=["圖片一","圖片二","圖片三"];?? ?var arrText2=["圖片四","圖片五","圖片六"];?? ?var arrUrl1=["img/1.jpg","img/2.jpg","img/3.jpg"];?? ?var arrUrl2=["img/1.png","img/2.png","img/3.png"];?? ?var num=0;?? ?var timer=null;?? ?//初始化?? ?oImg.src=arrUrl1[num];?? ?oLi[num].className="active1";?? ?aHref[num].className="active2";?? ?for (var i=0; i<aHref.length; i++) {?? ??? ?aHref[i].innerHTML=arrText1[i%arrText1.length];?? ??? ?}?? ?//菜單一?? ?for (var i=0; i<oLi.length; i++) {?? ?oLi[0].onclick=function () {?? ??? ?for (var i=0; i<oLi.length;i++) {?? ??? ??? ?oLi[i].className="";?? ??? ??? ?}?? ??? ?this.className="active1"?? ??? ?oImg.src=arrUrl1[num];?? ??? ?for (var i=0; i<aHref.length; i++) {?? ??? ??? ?aHref[i].innerHTML=arrText1[i%arrText1.length];?? ??? ??? ?aHref[i].className="";?? ??? ??? ?aHref[0].className="active2";?? ??? ??? ?}?? ??? ?getMouse(arrUrl1);?? ??? ??? ?};?? ??? ??? ???? ?? ??? ?//aHref 公用樣式 ?? ??? function getMouse(arrUrl) {?? ??? ??? ?for (var i=0; i<aHref.length; i++) {?? ??? ??? ?aHref[i].index=i;?? ??? ???? //點(diǎn)擊?? ??? ????aHref[i].onclick=function () {?? ??? ??? ??? ?for (var i=0; i<aHref.length; i++) {?? ??? ??? ??? ??? ?aHref[i].className="";?? ??? ??? ??? ??? ?}?? ??? ??? ??? ?this.className="active2";?? ??? ??? ??? ?oImg.src=arrUrl[this.index%arrUrl.length];?? ??? ??? ??? ?}?? ??? ??? ??????? ?? ??? ??? ?//aHref 移入? ?? ??? ??? ?aHref[i].onmouseover=function () {?? ??? ??? ??? ?for (var i=0; i<aHref.length; i++) {?? ??? ??? ??? ??? ?aHref[i].className="";?? ??? ??? ??? ??? ?}?? ??? ??? ??? ?this.className="active2";?? ??? ??? ??? ?oImg.src=arrUrl[this.index%arrUrl.length];?? ??? ??? ??? ?}?? ??? ??? ???? ?? ??? ?}?? ?}?? ?getMouse(arrUrl1);?? ??? ?//菜單二?? ??? ??? ?oLi[1].onclick=function () {?? ??? ?for (var i=0; i<oLi.length;i++) {?? ??? ??? ?oLi[i].className="";?? ??? ??? ?}?? ??? ?this.className="active1"?? ??? ?for (var i=0; i<aHref.length; i++) {?? ??? ??? ?aHref[i].innerHTML=arrText2[i%arrText2.length];?? ??? ??? ?oImg.src=arrUrl2[num];?? ??? ??? ?aHref[i].className="";?? ??? ??? ?aHref[0].className="active2";?? ??? ??? ?}?? ??? ?getMouse(arrUrl2);?? ??? ?}// 問題的原因：這種重復(fù)定時(shí)器的規(guī)則有兩個(gè)問題：1.某些間隔會(huì)被跳過 2.多個(gè)定時(shí)器的代碼執(zhí)行時(shí)間可能會(huì)比預(yù)期小。=======================================================================?? var timer=setInterval(getChange,1000);?? ??? ?function getChange () {?? ??? ??? ?for (var i=0; i<aHref.length; i++) {?? ??? ??? ??? ??? ?aHref[i].className="";?? ??? ??? ??? ??? ?}?? ??? ??? ?num++;?? ??? ??? ??? ?aHref[num].className="active2";?? ??? ??? ??? ??? ??? ?console.log(num);?? ??? ??? ?if (num==arrUrl1.length) {?? ??? ??? ??? ?for (var i=0; i<oLi.length;i++) {?? ??? ??? ??? ??? ?oLi[i].className="";?? ??? ??? ??? ??? ?}?? ??? ??? ??? ??? ?oLi[1].className="active1"?? ??? ??? ??? ??? ?num=-1;?? ??? ??? ??? ??? ?oImg.src=arrUrl2[num];?? ??? ??? ??? ??? ??? ??? ??? ??? ?}?? ??? ??? ??? ??? ???? ｝=========================================================================</script></body></html>==================================================================關(guān)于使用定時(shí)器我設(shè)置的是num=0；定時(shí)器每執(zhí)行一次 num++； num初始值是0；但是執(zhí)行的時(shí)候 num的變化值是? =================================================================目前解決的代碼：var timer=setTimeout(function(){?? ??? ?num++;?? ??? ??? ??? ?if (num==arrUrl1.length) {?? ??? ??? ?for (var i=0; i<oLi.length;i++) {?? ??? ??? ??? ?oLi[i].className="";?? ??? ??? ??? ?}?? ??? ??? ??? ?if (onOff) {?? ??? ??? ??? ??? ?oLi[1].className="active1";?? ??? ??? ??? ??? ?oImg.src=arrUrl2[num];?? ??? ??? ??? ??? ?onOff=false;?? ??? ??? ??? ?}?? ??? ??? ??? ?else {?? ??? ??? ??? ??? ?oLi[0].className="active1";?? ??? ??? ??? ??? ?oImg.src=arrUrl1[num];?? ??? ??? ??? ??? ?onOff=true;?? ??? ??? ??? ??? ?}?? ??? ??? ??? ?num=0;?? ??? ??? ??? ?oImg.src=arrUrl2[num];?? ??? ??? ??? ??? ?}?? ??? ?for (var i=0; i<aHref.length; i++) {?? ??? ??? ?aHref[i].className="";?? ??? ?}?? ??? ??? ?aHref[num].className="active2";?? ??? ??? ?for (var i=0; i<oLi.length; i++) {?? ??? ??? ?if (oLi[0].className!="") {?? ??? ??? ??? ?oImg.src=arrUrl1[num];?? ??? ??? ??? ??? ??? ??? ?}?? ??? ??? ?else {?? ??? ??? ??? ??? ??? ??? ??? ?oImg.src=arrUrl2[num];?? ??? ??? ??? ?}?? ??? ??? ?}??? setTimeout(arguments.callee,1000);},1000)

查看完整描述