我正在尝试遍历并执行数组中的函数，但是我在这样做时遇到问题，这是代码：
<p id="demo" >I will change colour automatically.</p>
<script>
var i = 0;
var array_of_functions = [
function first_function(){
document.getElementById("demo").style.color = "red";
},
function second_function(){
document.getElementById("demo").style.color = "blue";
},
function third_function(){
document.getElementById("demo").style.color = "green";
},
function forth_function(){
document.getElementById("demo").style.color = "white";
}
];
var time = 1000;
function change(){
for(var i=0, len=array_of_functions.length; i < len; i++){
}
window.onload = change;
</script>
请告诉我我做错了什么。
您需要使用array_of_functions[i]()在循环中运行函数，但是如果要在每次迭代之间设置延迟，则需要使用setTimeout。
在现代 JavaScript 中，您可以使用async和await来维护代码的命令式风格。由于数组中的每个函数几乎相同，因此您可以更改数组，使其仅存储更改的内容：颜色。
function delay(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
async function change() {
for (const color of ['red', 'blue', 'green', 'white']) {
document.getElementById('demo').style.color = color;
await delay(1000);
}
}
window.onload = change;<p id="demo">I will change colour automatically.</p>你永远不会在for循环中执行你的函数。改变
for(var i=0, len=array_of_functions.length; i < len; i++){
}
自：
for(var i=0, len=array_of_functions.length; i < len; i++){
array_of_functions[i]();
}
var i = 0;
var array_of_functions = [
function first_function(){
document.getElementById("demo").style.color = "red";
},
function second_function(){
document.getElementById("demo").style.color = "blue";
},
function third_function(){
document.getElementById("demo").style.color = "green";
},
function forth_function(){
document.getElementById("demo").style.color = "brown";
}
];
var time = 1000;
function change(){
for(var i=0, len=array_of_functions.length; i < len; i++){
array_of_functions[i]();
}
}
window.onload = change;<p id="demo">I will change colour automatically.</p>for(var i=0, len=array_of_functions.length; i < len; i++){
}
自：
for(var i=0, len=array_of_functions.length; i < len; i++){
array_of_functions[i]();
}
如果您希望每次调用之间有 1000 毫秒的时间延迟(如变量time所示(，您可以使用.reduce()将承诺链接在一起：
const array_of_functions = [
'red', 'blue', 'green', 'white'
].map(function (color) {
return function () {
document.getElementById('demo').style.color = color;
};
});
var time = 1000;
function sleep(ms) {
return function () {
return new Promise(function (resolve) {
setTimeout(resolve, ms);
});
};
}
function change() {
array_of_functions.reduce(function (promise, func) {
return promise.then(sleep(time)).then(func);
}, Promise.resolve());
}
window.onload = change;<p id="demo">I will change colour automatically.</p>使用 ES6 箭头函数，您可以将其简化为：
const array_of_functions = [
'red', 'blue', 'green', 'white'
].map(
color => () => document.getElementById('demo').style.color = color
);
const time = 1000;
const sleep = ms => () => new Promise(resolve => {
setTimeout(resolve, ms);
});
function change() {
array_of_functions.reduce(
(promise, func) => promise.then(sleep(time)).then(func),
Promise.resolve()
);
}
window.onload = change;<p id="demo">I will change colour automatically.</p>最后，使用 ES2017async/await，可以进一步简化：
const array_of_functions = [
'red', 'blue', 'green', 'white'
].map(
color => () => document.getElementById('demo').style.color = color
);
const time = 1000;
const sleep = ms => new Promise(resolve => {
setTimeout(resolve, ms);
});
async function change() {
for (const func of array_of_functions) {
await sleep(time);
func();
}
}
window.onload = change;<p id="demo">I will change colour automatically.</p>我的猜测是，你真的在尝试这样做：
//<![CDATA[
/* external.js */
var doc, bod, htm, M, I, S, Q, rand, old = onload; // for use on other pages
onload = function(){ // load not indented to save space
if(old)old(); // change old var name if using technique on other pages
doc = document; bod = doc.body; htm = doc.documentElement;
M = function(tag){
return doc.createElement(tag);
}
I = function(id){
return doc.getElementById(id);
}
S = function(selector, within){
var w = within || doc;
return w.querySelector(selector);
}
Q = function(selector, within){
var w = within || doc;
return w.querySelectorAll(selector);
}
rand = function(array){
return array[Math.floor(Math.random()*array.length)];
}
var colors = ['red', 'green', 'blue', 'yellow', 'purple', 'orange', 'aqua'];
var demo = I('demo'), dS = demo.style;
setInterval(function(){
dS.color = rand(colors);
}, 300);
} // end load
//]]>/* external.css */
html,body{
padding:0; margin:0;
}
body{
background:#000; overflow-y:scroll;
}
.main{
width:940px; background:#fff; padding:20px; margin:0 auto;
}
#demo{
color:purple;
}<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<meta http-equiv='content-type' content='text/html;charset=utf-8' />
<meta name='viewport' content='width=device-width' />
<title>Test Template</title>
<link type='text/css' rel='stylesheet' href='external.css' />
<script type='text/javascript' src='external.js'></script>
</head>
<body>
<div class='main'>
<p id='demo'>I will change color automatically.</p>
</div>
</body>
</html>根据需要更改colors数组和间隔。
下面是一个示例：
var i = 0;
var demo = document.getElementById("demo");
var array_of_colors = ["red","blue","green","white"];
var time = 1000;
window.onload = function(){
setInterval(function(){
demo.style.color = array_of_colors[i++%4];
}, time)
};<p id="demo" >I will change colour automatically.</p>