Как вызвать несколько функций в массиве после setTimeout между ними?

Question

Необходимо создать последовательность функций, хранящихся в массиве.Нужно, чтобы они выполнялись каждые 400 мс.Сделал это, установив 500 setTimeout(function(){}) х.Как-то узнал, что должен делать это, создавая его динамически.Иметь готовые функции, но пропустить тайм-ауты, чтобы сделать это хорошей анимациейс функциями.Спасибо

ps: извините за плохой английский, сделано в Германии:)

todo = [

function computer1() {
    $('.'+mylist.name+':eq(1)').css({'background-color': 'chartreuse'});
},
function kabel1() {
    $('.'+mylist.name+':eq(0)').css({'border-bottom-color': 'chartreuse'});
},
function port1() {
    $('#'+mylist.identifier).css({'background-color': 'chartreuse'});
},
function port2() {
    for (var x=0;x<ports;x++) {
        $('#port'+(x+1)).css({'background-color': 'blue'});
        if (x===(mylist.number-1)) {
            $('#port'+(x+1)).css({'background-color': 'chartreuse'});
        }       
    }
},
function kabel2() {
    for (var x=0;x<ports;x++) {
        $('#portugal'+(x+1)+':eq(0)').css({'border-bottom-color': 'blue'});
        if (x===(mylist.number-1)) {
            $('#portugal'+(x+1)+':eq(0)').css({'border-bottom-color': 'chartreuse'});
        }       
    }
},
function device2() {
    for (var x=0;x<ports;x++) {
        $('#'+(x+1)+'device').css({'background-color': 'blue'});
        if (x===(mylist.number-1)) {
            $('#'+(x+1)+'device').css({'background-color': 'chartreuse'});
        }
    }
},
function device3() {
    for (var x=0;x<ports;x++) {
        if (document.getElementById('info').textContent==document.getElementById((x+1)+'device').className) {
            var hammer = document.getElementById((x+1)+'device').getAttribute('class');
            $('.'+hammer+':eq(1)').css({'background-color': 'red'});
        }
    }
},
function mehr() {

}]

Answer 1

Я не сторонник изменения массива и изменения синхронной функции.Таким образом, меняя цикл.

// Created variable using let to over come closure
for (let x in todo) {
    setTimeout( ()=> {
        todo[x]();
    }, (x+1)*400);
}

Answer 2

Вы можете избежать создания ненужных замыканий или вычисления определенных таймаутов

const delay = (ms, x) =>
  new Promise (r => setTimeout (r, ms, x))
  
const funcs =
  [ () => console.log (1)
  , () => console.log (2)
  , () => console.log (3)
  ]
  
const forEachDelay = async (ms, [ f = () => {}, ...fs ]) =>
  fs.length === 0
    ? f ()
    : delay (ms, f ()) .then (() => forEachDelay (ms, fs))
    
forEachDelay (1000, funcs)
// 1
// (1000 ms later...) 2
// (1000 ms later...) 3

Преимущество использования async заключается в том, что мы получаем обещание и знаем, когда вся последовательность будет выполнена -

forEachDelay (1000, funcs) .then (() => console.log ('done'), console.error)
// 1
// (1000 ms later...) 2
// (1000 ms later...) 3
// done

Обещание являетсяэффективный тип данных, потому что он позволяет объединять меньшие шаги в один большой шаг.

Выше мы пишем forEachDelay, используя функциональное выражение, но мы могли бы также использовать цикл for императивного стиля в сочетании с мощным синтаксисом await -

const delay = (ms, x) =>
  new Promise (r => setTimeout (r, ms, x))
  
const funcs =
  [ () => console.log (1)
  , () => console.log (2)
  , () => console.log (3)
  ]
  
const forEachDelay = async (ms, fs = []) =>
{ for (const f of fs)
    await delay (ms, f ())
}
    
forEachDelay (1000, funcs) .then (() => console.log ('done'), console.error)
// 1
// (1000 ms later...) 2
// (1000 ms later...) 3
// done

Answer 3

Что-то в этом роде?

let startTime = new Date().getTime();
let functions = [
    ()=>console.log("f0: " + (new Date().getTime() - startTime) + " ms passed"),
    ()=>console.log("f1: " + (new Date().getTime() - startTime) + " ms passed"),
    ()=>console.log("f2: " + (new Date().getTime() - startTime) + " ms passed"),
    ()=>console.log("f3: " + (new Date().getTime() - startTime) + " ms passed"),
    ()=>console.log("f4: " + (new Date().getTime() - startTime) + " ms passed"),
]

let i = 0;
setInterval(() => {
  functions[i]();
  i++;
  if(i > functions.length - 1) i = 0;
}, 400);

Если это сработало, всегда нажимайте кнопку подтверждения;)