Javascript 动态创建任意数量的顺序触发函数

（JavaScript）我有一个函数，可以以一种很好的顺序处理玩家卡：玩家、庄家、玩家、庄家。下面是该函数的一部分，它将卡片按顺序移动到视口中

setTimeout(()=>{
    player1.style.top = `70%`;
    player1.style.left = `30%`;
    player1.style.transform = `rotate(${Math.floor(Math.random() * rotationMax)}deg)`;
    setTimeout(() => {
        dealer1.style.top = `8%`;
        dealer1.style.left = `30%` 
        dealer1.style.transform = `rotate(${Math.floor(Math.random() * rotationMax)+1}deg)`;
        setTimeout(() => {
            player2.style.top = `70%`;
            player2.style.left = `50%`
            player2.style.transform = `rotate(${Math.floor(Math.random() * rotationMax)}deg)`;
            setTimeout(() => {
                flippedCard.style.top = '8%';
                flippedCard.style.left = '44%';
            
        }, 200)}, 200)}, 100)}, 200)

您可以看到，此块仅适用于一定数量的卡（在本例中为4）。我的Javascript还不够好，无法创建动态生成任意数量的牌的函数

---

有人能给我指出正确的方向吗？具体问题：如何动态生成一个接一个运行的任务。

制作一个经销商卡和玩家卡的数组，并找出每个卡在

左侧的差异。然后在数组上迭代，用
wait
延迟，以使代码平坦且可读：

const delay200 = () => new Promise(res => setTimeout(res, 200);
const playerCards = [player1, player2];
const dealerCards = [dealer1, dealer2];
const playerLeftIncrement = 20; // eg: 30%, then 50%, then 70%; adjust as needed
const dealerLeftIncrement = 14; // eg: 30%, then 44%, then 58%; adjust as needed
const applyStyle = (card, left) => {
  Object.assign(
    card.style,
    {
      top: '70%',
      left,
      transform: `rotate(${Math.floor(Math.random() * rotationMax)}deg)`,
    }
  );
};
for (let i = 0; i < playerCards.length; i++) {
  applyStyle(playerCards[i], `${30 + i * playerLeftIncrement}%`);
  await delay200();
  applyStyle(dealerCards[i], `${30 + i * dealerLeftIncrement}%`);
  await delay200();
}

constdelay200=（）=>newpromise（res=>setTimeout（res，200）；
常量playerCards=[player1，player2]；
常量DealCards=[dealer1，dealer2]；
const playerLeftIncrement=20；//例如：30%，然后是50%，然后是70%；根据需要进行调整
const dealerLeftIncrement=14；//例如：30%，然后是44%，然后是58%；根据需要进行调整
常量applyStyle=（卡片，左侧）=>{
Object.assign(
卡片样式，
{
排名前：“70%”，
左边
变换：`rotate（${Math.floor（Math.random（）*rotationMax）}deg）`，
}
);
};
for（设i=0；i
制作一个经销商卡和玩家卡的数组，并找出您想要的每个
左侧
中的差异。然后在数组上迭代，使用
wait
延迟，以使代码平坦易读：

const delay200 = () => new Promise(res => setTimeout(res, 200);
const playerCards = [player1, player2];
const dealerCards = [dealer1, dealer2];
const playerLeftIncrement = 20; // eg: 30%, then 50%, then 70%; adjust as needed
const dealerLeftIncrement = 14; // eg: 30%, then 44%, then 58%; adjust as needed
const applyStyle = (card, left) => {
  Object.assign(
    card.style,
    {
      top: '70%',
      left,
      transform: `rotate(${Math.floor(Math.random() * rotationMax)}deg)`,
    }
  );
};
for (let i = 0; i < playerCards.length; i++) {
  applyStyle(playerCards[i], `${30 + i * playerLeftIncrement}%`);
  await delay200();
  applyStyle(dealerCards[i], `${30 + i * dealerLeftIncrement}%`);
  await delay200();
}

constdelay200=（）=>newpromise（res=>setTimeout（res，200）；
常量playerCards=[player1，player2]；
常量DealCards=[dealer1，dealer2]；
const playerLeftIncrement=20；//例如：30%，然后是50%，然后是70%；根据需要进行调整
const dealerLeftIncrement=14；//例如：30%，然后是44%，然后是58%；根据需要进行调整
常量applyStyle=（卡片，左侧）=>{
Object.assign(
卡片样式，
{
排名前：“70%”，
左边
变换：`rotate（${Math.floor（Math.random（）*rotationMax）}deg）`，
}
);
};
for（设i=0；i
拥有一个类似以下内容的函数会很有用：
callFunctionsWithDelays（函数，延迟）

这将避免代码的嵌套外观，并便于动态生成。我将使用async/await语法编写此代码：

async function callFunctionsWithDelays(functions, delays) {
    for (i = 0; i < functions.length; i++) {
         functions[i].call()
         await new Promise(resolve, setTimeout(resolve, delays[i]))
    }
}

异步函数调用FunctionswithDelays（函数，延迟）{
对于（i=0；i
拥有一个类似以下内容的函数会很有用：
callFunctionsWithDelays（函数，延迟）

这将避免代码的嵌套外观，并便于动态生成。我将使用async/await语法编写此代码：

async function callFunctionsWithDelays(functions, delays) {
    for (i = 0; i < functions.length; i++) {
         functions[i].call()
         await new Promise(resolve, setTimeout(resolve, delays[i]))
    }
}

异步函数调用FunctionswithDelays（函数，延迟）{
对于（i=0；i