如何在幻灯片中设置定时器以显示为已选择？

Question

我必须创建一个幻灯片，使用一组图像并在计时器上设置。有一个带有慢速，中速和快速选项的下拉菜单，图片需要根据所选的下拉选项进行转换。每当我在Web浏览器中执行此代码时，代码会重复，同时加倍，因为我在控制台中读取了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>

Answer 1

首先，我会阅读MDN关于setInterval()和clearInterval的文档，以填补导致您以这种方式解决问题的知识空白。

您在代码中递归调用changeImg()，我认为这会导致您描述的问题：

当我在控制台中读取i的值时，代码重复，同时加倍

此外，你的while循环将在调用changeImg()时立即运行，在这种情况下似乎也不需要。

setInterval()模仿了一段时间的循环。此代码中不需要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);
    });

}