Как настроить таймеры в слайд-шоу, чтобы они отображались как выбранные? - PullRequest
Новая
       20

Как настроить таймеры в слайд-шоу, чтобы они отображались как выбранные?

0 голосов
/ 01 апреля 2019

Я должен создать слайд-шоу, используя массив изображений и установить его на таймер.Существует раскрывающееся меню с медленными, средними и быстрыми параметрами, и изображения необходимо переключать в соответствии с выбранным параметром.Всякий раз, когда я выполняю этот код в веб-браузере, код повторяется, удваиваясь, когда я читаю значение i в консоли.

Я пытался использовать while и do-Цикл while для вращения изображений.

Я также попытался поместить операторы if вне и ниже / выше функции. 

<script>
var i = 0;
function changeImg(){
    if (x == 'slow'){
        setInterval("changeImg()", 5000);
    } else if (x == 'medium'){
        setInterval("changeImg()", 3000);
    } else if (x == 'fast') {
        setInterval("changeImg()", 1000);
    } else {}

        while (i < 3){
            console.log(i);
            document.slide.src = sportsArray[i];
            i++;
        }

        console.log(i);
        console.log(sportsArray);
    }
</sctipt>

1 Ответ

1 голос
/ 01 апреля 2019

Во-первых, я прочитал бы документы MDN по setInterval () и clearInterval , чтобы заполнить пробелы в знаниях, которые приведут вас к решению проблемы таким образом.

Вы рекурсивно вызываете changeImg() в своем коде, что, по-моему, вызывает проблему, которую вы описываете как:

код повторяется, удваивая, когда я читаю значение i в консоли

Кроме того, ваш цикл while будет запускаться немедленно при вызове changeImg(), что также не кажется желательным в этой ситуации.

setInterval() по своей природе имитирует цикл while.В этом коде нет необходимости использовать цикл while.Ниже приведено решение, которое, я надеюсь, вы можете использовать в качестве справочного материала.Я разделил код, чтобы определить интервал в функцию getIntervalSpeed.

function changeImg(x) {
    var getIntervalSpeed = function(x) {
        if (x === 'slow') {
            return 5000;
        } else if (x === 'medium') {
            return 3000;
        } else if (x === 'fast') {
            return 1000;
        } else {
            return 3000;
            // return a default interval if x is not defined
        }
    };

    var i = 0;

    var slideShow = setInterval(function() {
        if (i >= sportsArray.length) {
            i = 0; // reset index
        }

        document.slide.src = sportsArray[i]; // set the slide.src to the current index
        i++; // increment index
    }, getIntervalSpeed(x));

    // on click of ANY button on the page, stop the slideshow
    document.querySelector('button').addEventListener('click', function() {
        clearInterval(slideShow);
    });

}
...