Problèmes avec setInterval et indéfinis

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

Question

Je suis en train de créer une lumière stroboscopique de base dans le navigateur en utilisant l'élément canvas. Je me attends setInterval de continuer à appeler la fonction changeBG au changement d'une couleur de fond aléatoire. Cette fonction fonctionne très bien lui-même, mais pas lorsqu'il est appelé par setInterval. J'ai essayé en tirant cette page à Firebug et il m'a dit que les couleurs ont été défini. Voici le code problématique. 

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

Je suis nouveau javascript de sorte que toute idée que si jamais serait très appréciée.

Était-ce utile?

La solution

Code Vous travaillerait si vous ne transmettaient pas une chaîne à setInterval. Parce qu'il est dans une chaîne, il ne peut pas créer une fermeture sur les variables que vous essayez d'utiliser.

Essayez ceci: 

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

En utilisant cette méthode, vous passez une fonction anonyme à setInterval. Il appellera cette fonction une fois par intervalle, ce qui est de 1000 millisecondes dans cet exemple.

La fonction peut utiliser les couleurs, CTX et les variables de toile parce qu'ils existent dans le domaine où la fonction est déclarée. Cela crée une fermeture de telle sorte que ces variables existent encore (dans la mesure où notre fonction anonyme est concernée) lorsqu'elle est appelée encore et encore.

Pour l'instant, vous pouvez probablement utiliser ce code. Pour une meilleure compréhension, je vous suggère de rechercher des fonctions anonymes et fermetures.

Autres conseils

Vous pouvez passer directement une fonction, au lieu d'une chaîne à évaluer, comme 

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

Bonne chance provoquer l'épilepsie à quelqu'un

Le problème de la racine est portée variable lorsque le code est exécuté intervalle, les couleurs et les autres variables ne sont pas dans le champ d'application.

Essayez ceci: 

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

essayer MIS À JOUR setInterval(function(){changeBG(colors,ctx,canvas)}, 1000);

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top