Проблема с setInterval и неопределенными аргументами

StackOverflow https://stackoverflow.com/questions/3462852

Вопрос

Я пытаюсь создать базовую стробоскопическую подсветку в браузере, используя элемент 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>

Я новичок в javascript, поэтому любая информация о том, что происходит, была бы высоко оценена.

Это было полезно?

Решение

Ваш код работал бы, если бы вы не передавали строку в setInterval.Поскольку он находится в строке, он не может создать замыкание для переменных, которые вы пытаетесь использовать.

Попробуйте это вместо этого:

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

Используя этот метод, вы передаете анонимную функцию setInterval.Он будет вызывать эту функцию один раз за интервал, который в данном примере равен 1000 миллисекундам.

Функция может использовать переменные colors, ctx и canvas, поскольку они существуют в области видимости, в которой объявлена функция.Это создает замыкание, так что эти переменные все еще существуют (что касается нашей анонимной функции), когда она вызывается снова и снова.

На данный момент вы, вероятно, можете просто использовать этот код.Для дальнейшего понимания я предлагаю изучить анонимные функции и замыкания.

Другие советы

Вы можете передавать непосредственно функцию, а не строку для оценки, как

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

Удачи спровоцировать эпилепсию кому-то

Координационная задача - это переменная область применения, когда промежуточный код выполнен, цвета и другие переменные не имеют возможности.

Попробуй это:

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

Попробуйте это обновленоsetInterval(function(){changeBG(colors,ctx,canvas)}, 1000);

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top