如何在使用 setTimeout() 时使用不同的参数顺序调用相同的函数

Question

我想用不同的参数多次调用函数example，同时在logic 中使用setTimeout。我希望这是顺序的（在第一个调用完成后，第二个调用可以开始，依此类推）。在下面的代码 sn-p 中，example 似乎逐个元素遍历两个数组：

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];

function logic(i, arr) {
    setTimeout(() => {
        console.log(arr[i]);
    }, (i + 1) * 300);
}

function example(arr) {

    for (var i = 0; i < arr.length; i++) {

        logic(i, arr);
    }

}

setTimeout(() => {
    example(arr1)
}, 3000);
setTimeout(() => {
    example(arr2)
}, 3000);

1
4
2
5
3
6

我知道我可以将第二次调用的计时器设置为例如 6 秒，它会起作用，但我想知道：

是否有另一种方法可以发现函数调用完成然后触发下一个？没有静态定义一些延迟，甚至可能没有 setTimeout？

Answer 1

logic 需要让调用者知道它何时完成，然后 example 需要让调用者知道它何时完成。承诺会在这里帮助你。

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];

function logic(i, arr) {
  return new Promise(resolve => {
    setTimeout(() => {
        console.log(arr[i]);
        resolve();
    }, (i + 1) * 300);
  });
}

async function example(arr) {

    for (var i = 0; i < arr.length; i++) {

        await logic(i, arr);
    }

}

(async function() {
  await example(arr1);
  await example(arr2);
})();