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秒的第二个时间间隔。这也太低了。