使用setInterval时未定义的变量

Question

I am trying to build a website with a background that switches images every five seconds. 我正在尝试建立一个网站，其背景每五秒钟切换一次图像。 I use javascript to achieve this. 我使用javascript来实现这一点。 After some fiddling around i stumbled upon what seems to be a scope issue, as it keeps telling me that the var imageCount is undefined. 经过一番摆弄之后，我偶然发现了一个似乎是范围问题，因为它一直告诉我var imageCount是未定义的。 i am a bit of a newbie regarding javascript and stackoverflow and i appreciate any help i could get. 我是关于javascript和stackoverflow的新手，我感谢我能获得的任何帮助。

html HTML

<body>

    <div id="overlay">




    </div>

    <script>




        window.setInterval(execute, 5000);

        var imageCount;

        function execute() {

            console.log("bla");





                if(imageCount == 0){
                    document.body.style.backgroundImage = "url('huis1.jpg')";
                    console.log("huis1");
                }

                else if(imageCount == 1){
                    document.body.style.backgroundImage = "url('huis2.jpg')";
                    console.log("huis2");
                }

                else if(imageCount == 2){
                    document.body.style.backgroundImage = "url('huis3.jpg')";
                    console.log("huis3");
                    imageCount = 0;
                }

                console.log(imageCount);



        }

    </script>

</body>

i would like to also post the CSS to this file but i wouldn't know how to do it if my life depended on it. 我也想将CSS发布到此文件，但是如果我的生活依赖它，我将不知道该怎么做。

Answer 1

As mention in the comment you have to initialise your variable. 如评论中所述，您必须初始化变量。 You also have to increment your index each iteration, and if you only change the background you maybe not need the if . 您还必须在每次迭代中增加索引，如果仅更改背景，则可能不需要if 。

var imageCount = 0; // initialise your index variable

function execute() {
  // increment your index if value is less than 2 otherwise set it to 0
  imageCount = (imageCount >= 2) ? 0 : ++imageCount;
  // concate your image name with the index value
  document.body.style.backgroundImage = "url('huis" + (imageCount + 1)+ ".jpg')";
}

window.setInterval(execute, 5000);

Answer 2

You don't need the global variable imageCount for this implementation. 您不需要此实现的全局变量imageCount。
It can easily be done using a closure 使用闭包可以轻松完成
See code below: 参见下面的代码：

window.setInterval(execute(), 5000);

function execute() {
    var imageCount = 0;
    return function() {
        console.log("bla");
        if(imageCount == 0){
            document.body.style.backgroundImage = "url('huis1.jpg')";
            console.log("huis1");
            imageCount = 1;
        } else if(imageCount == 1){
            document.body.style.backgroundImage = "url('huis2.jpg')";
            console.log("huis2");
            imageCount = 2;
        } else if(imageCount == 2){
            document.body.style.backgroundImage = "url('huis3.jpg')";
            console.log("huis3");
            imageCount = 0;
        }
        console.log(imageCount);
    }
}

使用setInterval时未定义的变量

问题描述

2 个解决方案

解决方案1
1 2015-04-10 23:31:10

解决方案2
1

使用setInterval时未定义的变量

问题描述

2 个解决方案

解决方案1 1 2015-04-10 23:31:10

解决方案2 1

解决方案1
1 2015-04-10 23:31:10

解决方案2
1