Question

需要创建存储在数组中的一系列功能。需要它们每400ms执行一次。通过设置500个setTimeout(function(){})来做到这一点。以某种方式得知应该通过动态创建它来做到这一点。准备好功能，但是错过超时以使其成为一个漂亮的动画

这是我认为必须设置超时时间的部分：

function start() {
    mylist.name = this.className;
    mylist.identifier = 'port'+parseFloat(this.id);
    mylist.number = parseFloat(this.id);
    console.log(mylist.number);
    for (var x in todo) {
        todo[x]();
    }
}

这是带有函数的数组。谢谢

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

类似的东西吗？

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

如果可以，请务必粉碎“接受”按钮;）

Answer 2

我不赞成更改数组和修改同步功能。因此更改为循环。

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

Answer 3

您可以避免创建不必要的闭包或计算特定的超时时间

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的一个优势是我们将获得一个Promise，并且知道何时完成整个序列–

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

Promise是一种有效的数据类型，因为它使您可以将较小的步骤组合为一个较大的步骤。

上面我们使用函数表达式编写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

在它们之间的setTimeout之后，如何在数组中调用多个函数？

3 个答案: