Javascript -Автоматический цикл через и выполнять функции в массиве - PullRequest
Новая
       8

Javascript -Автоматический цикл через и выполнять функции в массиве

0 голосов
/ 12 июня 2018

Я пытаюсь перебрать и выполнить функции в моем массиве, однако у меня возникают проблемы с этим, вот код: 

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

Пожалуйста, скажите мне, что я делаю неправильно.)

Ответы [ 6 ]

0 голосов
/ 12 июня 2018

Вот пример: 

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>
0 голосов
/ 12 июня 2018

Полагаю, вы действительно пытаетесь это сделать: 

//<![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 и интервал.

0 голосов
/ 12 июня 2018

Вам нужно запускать функции внутри цикла, используя array_of_functions[i](), но если вы хотите поместить задержку между каждой итерацией, вам нужно будет использовать setTimeout.

Inсовременный 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>
0 голосов
/ 12 июня 2018 

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]();
}
0 голосов
/ 12 июня 2018

Если вы хотите, чтобы между каждым вызовом была задержка в 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>

Наконец, используя ES2017 async / 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>
0 голосов
/ 12 июня 2018

Вы никогда не выполняете свои функции внутри цикла 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]();
}
...