在 javascript 中依次打印两个数组（有间隔）

Question

我有两个数组：数字：[1,2,3,4] 字母：["a","b","c","d"]

我想先打印数字数组，时间间隔为 3 秒，然后打印字母数组。输出应为：1（3 秒间隔）2（3 秒间隔）3（3 秒间隔）4（3 秒间隔）5（3 秒间隔）a b c d.

我尝试使用以下代码：

const result = document.getElementById("frame")
const numbers = [1,2,3,4], letters = ["a","b","c","d"]

const function1 = () =>
  letters.forEach((c, i) => setTimeout(() => console.log(c)));
const function2 = () =>
  numbers.forEach((c, i) => setTimeout(() => console.log(c), i * 3000));

async function main(){
    await function1();
    await function2();
}
main();

Answer 1

你可以做到

const numbers = [1,2,3,4], letters = ["a","b","c","d"]

const function1 = () => new Promise((resolve) => {
  letters.forEach((c, i) => setTimeout(() => console.log(c), i * 3000));
  setTimeout(resolve, letters.length * 3000)
})
  
const function2 = () =>
  numbers.forEach((c, i) => setTimeout(() => console.log(c)));

async function main(){
    await function1();
    await function2();
}
main();

Answer 2

const numbers = [1, 2, 3, 4]
const letters = ['a', 'b', 'c', 'd']

const wait = value => new Promise(resolve => setTimeout(() => resolve(), value))

const function1 = async () => {
    numbers.forEach(async (item, i) => {
        await wait(3000 * i)

        console.log(item)
    })

    await wait(3000 * numbers.length - 1)

    letters.forEach((item) => {
        console.log(item)
    })
}

function1()

Answer 3

如果您只是一次记录所有字母，则该函数不需要 async。您可以 return 来自 function2.
的连接数组
function1 是否需要 async 但这不是您的代码中发生的情况。因为 setTimeout 在 async 函数中表现不佳，您需要设置 promise-based 延迟，然后在函数内部使用它。

const numbers = [1, 2, 3, 4];
const letters = ['A', 'B', 'C', 'D'];

// Resolve a promise after a given time
function delay(time) {
  return new Promise(res => {
    return setTimeout(() => res(), time);
  });
}

function function1(arr) {

  // Return a promise that is awaited
  return new Promise(res => {

    // Loop over the array
    async function loop(i) {

      // Log the element
      console.log(arr[i]);

      // Call the delay function
      await delay(3000);

      // And then work out if you need
      // to call `loop` again, or resolve the promise
      if (arr.length - 1 === i) {
        res();
      } else {
        loop(++i);
      }

    }

    // Call loop for the first time
    loop(0);

  });

}

function function2(arr) {
  return arr.join(' ');
}

async function main() {
  await function1(numbers);
  console.log(function2(letters));
}

main();

Answer 4

作为记录，另一个等待输出的简单示例。这假设您的最终输出目标对于两个数组都是相同的，只是没有延迟。如果实际输出方法是异步的，您也可以等待，但要为两个数组保留一个入口点

const numbers = [1,2,3,4], letters = ["a","b","c","d"];

async function output(arr,delayAfterEach){
  for(element of arr){  
     console.log(element);
     if(delayAfterEach)
        await new Promise(r=>setTimeout(r,delayAfterEach));
  }
}

async function main(){
    await output(numbers,3000);
    await output(letters);
}
main();

在 javascript 中依次打印两个数组（有间隔）

Print two array one after another(with interval) in javascript

javascript

arrays

settimeout