setInterval（）同時執行的兩個函數正在相互減速

Question

我寫了一個腳本，其中有兩個函數由setInterval()執行。

一個功能rotateTheSun()不斷旋轉一個物體，另一個moveSlide()處理移動滑動格onclick。

每當常量函數運行時，div滑動速度非常慢。

這是一個JS問題，還是我寫了一個壞腳本（像往常一樣）？

來源：

window.onload = initAll; 

function initAll(){ 
    slideDivs = document.getElementsByClassName("slide"); 
    slideLinks = document.getElementsByClassName("slide-link"); 
    isMoving = false; 
    curSlideState = 2; 
    desSlideState = ""; 
    transformDeg = 0; 

    for(var i=0; i < slideDivs.length; i++){ 
     slideDivs[i].style.left = i*100 + "px"; 
    } 

    for(var i=0; i < slideLinks.length; i++){ 
     slideLinks[i].onclick = moveSlide; 
    } 

    rotatingSun = document.getElementById("rotating-sun"); 
    rotatingSun.style.MozTransform = "rotate(" + transformDeg + "deg)"; 
    rotatingSun.style.WebkitTransform = "rotate(" + transformDeg + "deg)"; 
    rotatingSun.style.OTransform = "rotate(" + transformDeg + "deg)"; 
    rotatingSun.style.transform = "rotate(" + transformDeg + "deg)"; 

    sunTimer = setInterval(rotateTheSun, 33); 
} 
function moveSlide(){ 
    elementToMove = this.parentNode.parentNode; 

    if(elementToMove.tagName == "DIV" && isMoving == false){ 
     for(var i=0; i < slideDivs.length; i++){ 
      if(elementToMove == slideDivs[i]){ 
       desSlideState = i; 
      } 
     } 

     moveAction = (curSlideState - desSlideState); 
     if(moveAction == 0){ 
      return false; 
     } 
     if(moveAction > 0){ 
      moveDirection = 1; 
     } 
     else{ 
      moveDirection = -1; 
     } 

     switch (moveAction){ 
      case 0: 
       return false; 
       break; 
      case +2: 
       divToMove1 = slideDivs[1]; 
       divToMove2 = slideDivs[2]; 
       break; 
      case -2: 
       divToMove1 = slideDivs[2]; 
       divToMove2 = slideDivs[1]; 
       break; 
      case +1: 
       if(curSlideState == 2){ 
        divToMove1 = slideDivs[2]; 
        divToMove2 = ""; 
       } 
       else{ 
        divToMove1 = slideDivs[1]; 
        divToMove2 = ""; 
       } 
       break; 
      case -1: 
       if(curSlideState == 1){ 
        divToMove1 = slideDivs[2]; 
        divToMove2 = ""; 
       } 
       else{ 
        divToMove1 = slideDivs[1]; 
        divToMove2 = ""; 
       } 
       break; 
      } 
     } 
     else{ 
      return false; 
     } 

     moveCounter = 0; 
     isMoving = true; 
     timeMove(); 
     return false; 
    } 

function timeMove(){ 
    slideTimer = setInterval("executeMove()", 5); 
} 
function executeMove(){ 
    curLeft1 = parseFloat(divToMove1.style.left); 
    if(divToMove2){ 
     curLeft2 = parseFloat(divToMove2.style.left); 
    } 

    divToMove1.style.left = curLeft1 + 10*moveDirection + "px"; 
    if(divToMove2){ 
     divToMove2.style.left = curLeft2 + 10*moveDirection + "px"; 
    } 

    moveCounter += 1; 

    if(moveCounter == 66){ 
     clearInterval(slideTimer); 
     curSlideState = desSlideState; 
     isMoving = false; 
    } 
} 

function rotateTheSun(){ 
    transformDeg += 0.1; 
    if(transformDeg > 360){ 
     transformDeg = 0; 
    } 
    rotatingSun.style.MozTransform = "rotate(" + transformDeg + "deg)"; 
    rotatingSun.style.WebkitTransform = "rotate(" + transformDeg + "deg)"; 
    rotatingSun.style.OTransform = "rotate(" + transformDeg + "deg)"; 
    rotatingSun.style.transform = "rotate(" + transformDeg + "deg)"; 
} 

Answer 1

Javascript只有一個線程，所以即使這兩個函數可能設置爲異步執行，但只能有一個可以在一次執行。有關更多詳細信息，請參見How JavaScript Timers Work。

你設定的時間也很短。請記住，setInterval和setTimeout需要一個毫秒參數，2.5毫秒可能甚至不可識別。也許你的意思是250.

另外，作爲一個附註，你不應該把字符串傳給setInterval和setTimeout。相反，通過自身

setInterval("rotateTheSun()", 2.5); --->setInterval(rotateTheSun, 250);

Answer 2

你一定要爲setInterval()提出了更高的超時值。 2.5意味着每秒400次迭代！我推薦一個16毫秒的值。這會給你每秒60步。即使每33毫秒有一步，您將以每秒30步的速度獲得恆定的平滑速率。這同樣適用於5秒的第二個時間間隔。這也太低了。