setInterval和未定义的参数有问题

Question

setInterval和未定义的参数有问题

Col*_*nes 1 javascript html5 canvas setinterval

我正在尝试使用canvas元素在浏览器中创建一个基本的频闪灯.我期待setInterval继续调用changeBG函数来改变为随机背景颜色.此函数本身可以正常工作,但在setInterval调用时则不行.我试图在firebug中提取这个页面,它告诉我颜色未定义.这是有问题的代码.

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

Run Code Online (Sandbox Code Playgroud)

我是javascript的新手所以任何洞察力都会受到高度赞赏.

Answer 1

End*_*ssa 7

如果您没有将字符串传递给setInterval,那么代码将起作用.因为它在字符串中,所以无法在您尝试使用的变量上创建闭包.

试试这个:

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

Run Code Online (Sandbox Code Playgroud)

使用此方法,您将匿名函数传递给setInterval.它将在每个间隔调用此函数一次,在此示例中为1000毫秒.

该函数可以使用colors,ctx和canvas变量,因为它们存在于声明函数的范围内.这会创建一个闭包,以便在一次又一次地调用它们时,这些变量仍然存在(就我们的匿名函数而言).

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

归档时间：	15 年，5 月前
查看次数：	3269 次
最近记录：	15 年，5 月前