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

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

您正在代码中递归调用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);
    });

}

如何在幻灯片放映中设置计时器以显示为选中状态？

1 个答案: