javascript - 如何在幻灯片中设置计时器以显示所选内容？

Question

我必须使用一组图像创建一个幻灯片，并将其设置为计时器。有一个下拉菜单，其中包含慢速、中速和快速选项，图片需要根据所选的下拉选项进行转换。每当我在网络浏览器中执行此代码时，当我在控制台中读取 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() ，我认为这导致了您所描述的问题:

the code repeats itself, while doubling, as I read the value of i in the console

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

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);
    });

}