Question

我正在尝试遍历并执行我的数组中的函数，但是我遇到了这样的问题，这里是代码：

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

请告诉我我做错了什么。）

Answer 1

您需要使用array_of_functions[i]()在循环内运行函数，但如果您想在每次迭代之间设置延迟，则需要使用setTimeout。

在现代JavaScript中，您可以使用async和await来维护代码的命令式样式。由于数组中的每个函数几乎相同，因此您可以更改数组，使其仅存储更改：颜色。

＆＃13;

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;

＆＃13;

<p id="demo">I will change colour automatically.</p>

＆＃13;

Answer 2

您永远不会在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]();
}

Answer 3

如果您希望每次通话之间的时间延迟为1000毫秒（如变量time所示），您可以使用.reduce()将承诺链接在一起：

＆＃13;

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;

＆＃13;

<p id="demo">I will change colour automatically.</p>

＆＃13;

使用ES6箭头功能，您可以将其简化为：

＆＃13;

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;

＆＃13;

<p id="demo">I will change colour automatically.</p>

＆＃13;

最后，使用ES2017 async / await，您可以进一步简化它：

＆＃13;

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;

＆＃13;

<p id="demo">I will change colour automatically.</p>

＆＃13;

Answer 4

＆＃13;

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;

＆＃13;

<p id="demo">I will change colour automatically.</p>

＆＃13;

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]();
}

Answer 5

我的猜测是，你真的想要这样做：

＆＃13;

//<![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
//]]>

＆＃13;

/* 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;
}

＆＃13;

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

＆＃13;

根据需要更改colors数组和间隔。

Answer 6

以下是一个例子：

＆＃13;

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)
};

＆＃13;

<p id="demo" >I will change colour automatically.</p>

＆＃13;

Javascript - 自动循环并执行数组中的函数

6 个答案: