如何在使用 setTimeout() 時使用不同的 arguments 按順序調用相同的 function

Question

我想用不同的 arguments 多次調用 function example ，同時在logic中使用setTimeout 。 我希望這是順序的（在第一個調用完成后，第二個調用可以開始，依此類推）。 在下面的代碼片段中， example似乎同時通過了 arrays 元素：

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 秒，它會起作用，但我想知道：

是否有另一種方法可以發現對example的調用已完成，然后觸發下一個？ 沒有靜態定義一些延遲，甚至可能沒有setTimeout ？

預期的 output 將是：

1
2
3
4
5
6

Answer 1

logic需要讓調用者知道它何時完成，然后示例需要讓調用者知道它何時完成。 承諾會在這里幫助你。

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