Hintergrundfarbe ändern

Question

Var bgcolor, wenn außerhalb der Funktion changeBackground() nicht funktioniert. Ich versuche Scope in js zu verstehen. Wenn sich die Variable außerhalb einer Funktion befindet, sollte sie global und für den restlichen Code zulässig sein. Wenn ich die var bgcolor in die Funktion bringe, funktioniert das Programm. Warum?

var colors = ['#6aa085', '#a73e60', '#90fe50', '#231c12', '#e7043c', '#0b59b6', '#F66964', '#0f2224', "#4c0E32", "#B3BB99", "#a7a1A9", "#132857"]; // do not have to be inside the changeBackground function 
 
var bgcolor = Math.floor(Math.random() * colors.length); // must be inside the function 
 

 
function changeBackground() { 
 
    $('#clock').animate({ 
 
    backgroundColor: colors[bgcolor], 
 
    }, 2000); 
 
} 
 

 
window.setInterval(changeBackground, 2000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Vielen Dank für die Hilfe.

Answer 1

Sie setTimeout innerhalb des vollständigen Rückruf von animate verwenden sollten.

Die Verwendung von setInterval wird nicht auf den Abschluss der letzten Animation warten.

Auch stellen Sie sicher, JQuery und jQueryUI Bibliothek

SNIPPET

var colors = ['#6aa085', '#a73e60', '#90fe50', '#231c12', '#e7043c', '#0b59b6', '#F66964', '#0f2224', "#4c0E32", "#B3BB99", "#a7a1A9", "#132857"]; // do not have to be inside the changeBackground function 
 

 

 

 
function changeBackground() { 
 
    var bgcolor = Math.floor(Math.random() * colors.length); // must be inside the function 
 
    $('#clock').animate({ 
 
    backgroundColor: colors[bgcolor] 
 
    }, 2000, function() { 
 
    window.setTimeout(changeBackground, 2000); //Second animate after first completes 
 
    }); 
 
} 
 

 
window.setTimeout(changeBackground, 2000); //For first time

#clock { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 

 
<div id="clock"></div>

Answer 2

Es ist kein Scoping-Problem. Das Problem tritt auf, wenn Sie die bgColor Definition außerhalb der Funktion setzen, wird sie nur beim Laden generiert, nicht jedes Mal, wenn das Intervall changeBackground() aufruft. Dies bedeutet, dass die Funktion bei jedem Aufruf dieselbe Farbe anlegt und scheinbar nichts tut.

Beachten Sie auch, dass Sie animate() auf der backgroundColor nicht aufrufen können, wenn Sie jQueryUI auf der Seite enthalten haben. Versuchen Sie folgendes:

var colors = ['#6aa085', '#a73e60', '#90fe50', '#231c12', '#e7043c', '#0b59b6', '#F66964', '#0f2224', "#4c0E32", "#B3BB99", "#a7a1A9", "#132857"]; 
 

 
function changeBackground() { 
 
    var bgcolor = Math.floor(Math.random() * colors.length); 
 
    $('#clock').animate({ 
 
    backgroundColor: colors[bgcolor], 
 
    }, 2000); 
 
} 
 

 
setInterval(changeBackground, 2000);

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 

 
<div id="clock">Clock</div>

Answer 3

var colors = ['#6aa085', '#a73e60', '#90fe50', '#231c12', '#e7043c', '#0b59b6', '#F66964', '#0f2224', "#4c0E32", "#B3BB99", "#a7a1A9", "#132857"]; // do not have to be inside the changeBackground function 


function changeBackground() { 
    var bgcolor = Math.floor(Math.random() * colors.length); // must be inside the function 
    $('#clock').animate({ 
    backgroundColor: colors[bgcolor], 
    }, 2000); 
} 

window.setInterval(changeBackground, 2000); 

HTML

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> 

<div id="clock">Clock Area</div> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>