setInterval 和未定义参数的问题答案

【问题标题】：Trouble with setInterval and undefined argumentssetInterval 和未定义参数的问题
【发布时间】：2010-08-11 21:07:50
【问题描述】：

我正在尝试使用 canvas 元素在浏览器中创建一个基本的频闪灯。我期待 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 新手，因此任何见解都将受到高度赞赏。

【问题讨论】：

标签： javascript html canvas setinterval

【解决方案1】：

如果您没有将字符串传递给 setInterval，您的代码将可以工作。因为它在一个字符串中，所以它无法对您尝试使用的变量创建闭包。

试试这个：

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

使用此方法，您将一个匿名函数传递给 setInterval。它会在每个间隔调用一次这个函数，在这个例子中是 1000 毫秒。

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

目前，您或许可以只使用此代码。为了进一步理解，我建议研究匿名函数和闭包。

【讨论】：

只是为了 OP 的完整性：如果您将 colors、ctx 和 canvas 变量声明为全局变量，而没有 var，则代码有效。为什么？因为变量现在是全局的。每当有人这样做时，上帝都会（几乎）杀死一只小猫。
非常感谢。我试过用死猫的版本，但我的良心无法接受。
@Chubas：正确。本来想提的，忘记了！

【解决方案2】：

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

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

祝某人癫痫发作

【讨论】：

【解决方案3】：

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

试试这个：

<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>

【讨论】：

【解决方案4】：

试试这个更新 setInterval(function(){changeBG(colors,ctx,canvas)}, 1000);

【讨论】：

我认为您不希望在此示例中的匿名函数中声明参数。这将阻止使用现有变量，因为函数会将它们视为输入，如果未提供它们，则将它们视为未定义。