Две функции, выполняемые setInterval () одновременно, замедляют друг друга

Question

Я написал скрипт с двумя функциями, выполняемыми setInterval().

Одна функция rotateTheSun() постоянно вращает объект, другая moveSlide() обрабатывает перемещение скользящего элемента div 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 имеет только один поток, поэтому, хотя обе функции могут быть настроены на асинхронное выполнение, только одна может выполняться одновременно. См. Как работают таймеры JavaScript для более подробной информации.

Время, которое вы устанавливаете, также очень мало. Помните, что 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. Это тоже слишком мало.