setInterval 和未定义参数的问题

发布于 2024-09-14 03:17:00 字数 1224 浏览 5 评论 0原文

我正在尝试使用画布元素在浏览器中创建基本的频闪灯。我期望 setInterval 继续调用 changeBG 函数以更改为随机背景颜色。该函数本身可以正常工作，但在被 setInterval 调用时就不行了。我尝试在萤火虫中拉出此页面，它告诉我颜色未定义。这是有问题的代码。

<html>
<head>
    <title>Strobe!</title>
    <link rel="stylesheet" type="text/css" href="reset.css" />
    <script type="text/javascript">
        function changeBG(colors,ctx,canvas) {                
            ctx.fillStyle = colors[Math.floor(Math.random()*colors.length)]
            ctx.fillRect(0,0,canvas.width,canvas.height)
        }

        function eventLoop() {
            var colors = ['#000000','#ff0000','#00ff00','#0000ff','#ffff00','#ff00ff','#00ffff']
            var canvas = document.getElementById('mainCanvas')
            var ctx = canvas.getContext('2d')
            canvas.width = window.innerWidth
            canvas.height = window.innerHeight
            //changeBG(colors,ctx,canvas)
            setInterval("changeBG(colors,ctx,canvas)", 1000);               
        }
    </script>
</head>
<body onload="eventLoop()">
    <canvas id="mainCanvas" width="800" height="600">
    </canvas>
</body>

我对 javascript 很陌生，所以任何见解都将受到高度赞赏。

原文

I'm trying to create a basic strobe light in the browser using the canvas element. I'm expecting setInterval to keep calling the changeBG function to change to a random background color. This function works fine on its own, but not when called by setInterval. I tried pulling up this page in firebug and it told me that colors was undefined. Here's the problematic code.

<html>
<head>
    <title>Strobe!</title>
    <link rel="stylesheet" type="text/css" href="reset.css" />
    <script type="text/javascript">
        function changeBG(colors,ctx,canvas) {                
            ctx.fillStyle = colors[Math.floor(Math.random()*colors.length)]
            ctx.fillRect(0,0,canvas.width,canvas.height)
        }

        function eventLoop() {
            var colors = ['#000000','#ff0000','#00ff00','#0000ff','#ffff00','#ff00ff','#00ffff']
            var canvas = document.getElementById('mainCanvas')
            var ctx = canvas.getContext('2d')
            canvas.width = window.innerWidth
            canvas.height = window.innerHeight
            //changeBG(colors,ctx,canvas)
            setInterval("changeBG(colors,ctx,canvas)", 1000);               
        }
    </script>
</head>
<body onload="eventLoop()">
    <canvas id="mainCanvas" width="800" height="600">
    </canvas>
</body>

I'm new to javascript so any insight what so ever would be highly appreciated.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

分開簡單 2024-09-21 03:17:00

如果您没有将字符串传递给 setInterval，您的代码将有效。因为它位于字符串中，所以它无法在您尝试使用的变量上创建闭包。

请尝试以下操作：

setInterval(function() {
    changeBG(colors,ctx,canvas);
}, 1000);

使用此方法，您可以将匿名函数传递给 setInterval。它将在每个时间间隔（本例中为 1000 毫秒）调用此函数一次。

该函数可以使用颜色、ctx 和 canvas 变量，因为它们存在于声明函数的范围内。这创建了一个闭包，以便当一遍又一遍地调用这些变量时，这些变量仍然存在（就我们的匿名函数而言）。

现在，您可能可以只使用这段代码。为了进一步理解，我建议研究匿名函数和闭包。

You code would work if you weren't passing a string to setInterval. Because it is in a string, it can't create a closure on the variables you are trying to use.

Try this instead:

setInterval(function() {
    changeBG(colors,ctx,canvas);
}, 1000);

Using this method, you are passing an anonymous function to setInterval. It will call this function once per interval, which is 1000 miliseconds in this example.

The function can use the colors, ctx, and canvas variables because they exist in the scope where the function is declared. This creates a closure so that those variables still exist (as far as our anonymous function is concerned) when it is called over and over again.

For now, you can probably just use this code. For further understanding, I suggest researching anonymous functions and closures.

回复收藏 0 原文

红墙和绿瓦 2024-09-21 03:17:00

您可以直接传递一个函数，而不是一个要评估的字符串，如

setInterval(function(){changeBG(colors,ctx,canvas)}, 1000);

祝某人好运引发癫痫

You can pass directly a function, instead of a string to evaluate, as

setInterval(function(){changeBG(colors,ctx,canvas)}, 1000);

Good luck provoking epilepsy to someone

回复收藏 0 原文

你不是我要的菜∠ 2024-09-21 03:17:00

根本问题是执行间隔代码时的变量范围，颜色和其他变量不在范围内。

试试这个：

<html>
<head>
<title>Strobe!</title>
<link rel="stylesheet" type="text/css" href="reset.css" />
<script type="text/javascript">           
    function eventLoop() {
        var colors = ['#000000','#ff0000','#00ff00','#0000ff','#ffff00','#ff00ff','#00ffff']
        var canvas = document.getElementById('mainCanvas')
        var ctx = canvas.getContext('2d')
        canvas.width = window.innerWidth
        canvas.height = window.innerHeight            
        setInterval(function() {                
            ctx.fillStyle = colors[Math.floor(Math.random()*colors.length)]
            ctx.fillRect(0,0,canvas.width,canvas.height)
        }, 1000);               
    }    
</script>
</head>
<body onload="eventLoop()">
    <canvas id="mainCanvas" width="800" height="600">
    </canvas>
</body>

The root problem is variable scope when the interval code is executed, colors and the other variables are not in scope.

Try this:

<html>
<head>
<title>Strobe!</title>
<link rel="stylesheet" type="text/css" href="reset.css" />
<script type="text/javascript">           
    function eventLoop() {
        var colors = ['#000000','#ff0000','#00ff00','#0000ff','#ffff00','#ff00ff','#00ffff']
        var canvas = document.getElementById('mainCanvas')
        var ctx = canvas.getContext('2d')
        canvas.width = window.innerWidth
        canvas.height = window.innerHeight            
        setInterval(function() {                
            ctx.fillStyle = colors[Math.floor(Math.random()*colors.length)]
            ctx.fillRect(0,0,canvas.width,canvas.height)
        }, 1000);               
    }    
</script>
</head>
<body onload="eventLoop()">
    <canvas id="mainCanvas" width="800" height="600">
    </canvas>
</body>

回复收藏 0 原文