时间戳

首页 > 解决方案 > 动态创建任意数量的顺序触发函数

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 中还不够好，无法创建可以动态生成任意数量要发牌的函数。

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

标签： javascriptasynchronoussequential

解决方案

制作一系列经销商卡和玩家卡，并找出left您想要的每张卡的差异。然后遍历数组，延迟await以使代码平坦且可读：

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

推荐阅读