Как приостановить мою анимацию в JavaScript

Question

Я пытаюсь анимировать фоновое изображение, я хотел бы узнать, как лучше всего добавить функцию паузы внутри этой функции?

function scrollBg(){
    //Go to next pixel row.
    current -= step;

    //If at the end of the image, then go to the top.
    if (current == restartPosition){
        current = 0;
    }

    //Set the CSS of the header.
    $('#campaignid').css("background-position","0 "+current+"px");
}

//Calls the scrolling function repeatedly
var init = setInterval("scrollBg()", scrollSpeed);

Answer 1

Вы можете использовать clearInterval(init), чтобы остановить анимацию, затем запомнить текущий шаг в некоторой переменной и запустить анимацию с этого шага, когда это требуется setInterval.В качестве альтернативы вы можете использовать другую глобальную переменную (аналогичную текущей), которая будет указывать, можете ли вы выполнять тело scrollBg или нет, например:

function scrollBg(){
    if(isPause){
      return;
    }
    //Go to next pixel row.
    current -= step;

    //If at the end of the image, then go to the top.
    if (current == restartPosition){
        current = 0;
    }

//Set the CSS of the header.
$('#campaignid').css("background-position","0 "+current+"px");

}

Вы установите паузуустановив isPause = true

Answer 2

Как насчет того, чтобы вы использовали clearInterval при определенном значении тока (то есть clearInterval (init)) и сбрасывали интервал в другое время?