更改背景颜色范围

Question

Var bgcolor，当在函数外部时changeBackground（）不工作。我试图了解js中的范围。如果var在函数之外，它应该是全局的，并且对于其余代码来说是易于使用的。当我将var bgcolor带入程序的函数内部时。为什么？

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>

谢谢你的帮助。

Answer 1

，您应该使用setTimeout的animate完整的回调中。使用setInterval不会等待最后一个动画完成。

另外，还要确保你已经添加JQuery的和jQueryUI的库

代码片段

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

这不是一个范围问题。问题是因为当您将bgColor定义放在函数之外时，它仅在加载时生成，而不是每次间隔调用changeBackground()时生成。这意味着该函数在每次调用时都会设置相同的颜色，并且看起来什么也不做。

另请注意，除非您在页面中包含jQueryUI，否则您不能在backgroundColor上调用animate()。试试这个：

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>