在异步函数中，sleep未定义。

Question

我目前正在开发一款记忆游戏。我想实现的一个功能是，在两秒钟后翻转卡片，而不是立即翻转。

let openCards = [];

function cardActions(card) {
    // prevent function from adding two classes over and over again 
    if (!(card.classList.contains('open'))) {
        // display the card's symbol 
        card.className += ' open';
        card.className += ' show';
        // add card to list of open cards
        openCards.push(card);
        if(openCards.length === 2) {
            if(openCards[0].innerHTML === openCards[1].innerHTML) {
                // add the match class
                Array.from(openCards).forEach(function(card){
                    card.className += ' match';
                });
                console.log('match');
                // empty open cards
                openCards = [];
            } else {
                Array.from(openCards).forEach(function(card) {
                    // add the mismatch class
                    card.className += ' mismatch';
                });

在程序的这一点上，当用户已经查看了卡片时，我计划翻转卡片。因此，我创建了一个名为flip的异步函数。我在其中放置了一个等待sleep的await函数，以暂停程序执行，但我收到了“未定义的sleep”错误。

我不确定为什么会发生这种情况，因为sleep函数确实在flip函数内定义了。

                // flip cards around
                async function flip() {
                    await sleep(2000);
                    Array.from(openCards).forEach(function(card) {
                        card.classList.remove('mismatch')
                        card.classList.remove('open');
                        card.classList.remove('show');
                    });
                }
                // give user time to look at the cards
                flip();
                console.log('these dont match');
                // empty open cards
                openCards = [];
            }
        }
    }
}

- jermhern

---

我没有看到代码中任何地方定义了 sleep 函数，这是为什么？ - CertainPerformance

@CertainPerformance "等待睡眠(2000);" - jermhern

在那里，你正在“调用”睡眠，而不是“定义”它。 - CertainPerformance

你还没有定义 sleep，你想要做什么？ - Joe Warner

你想让我演示如何使用超时吗？ - Joe Warner

Answer 1

Promise比setTimeout更易于处理。如果您想使用像您描述的sleep这样的东西，那么定义一个返回Promise的函数，在输入的毫秒数后解析它：

Promise比setTimeout更容易处理。如果你想要使用类似你所描述的sleep的功能，那么可以定义一个返回Promise对象的函数，该Promise对象会在设定的毫秒数之后被解析(resolve)：

const sleep = ms => new Promise(res => setTimeout(res, ms));

(async () => {
  console.log('1');
  await sleep(500);
  console.log('2');
  await sleep(1500);
  console.log('3');
})();

它将使代码保持更加扁平，而不是使用setTimeout和回调函数。

- CertainPerformance

Answer 2

https://developer.mozilla.org/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout

不要使用await sleep(2000);，因为sleep不是一个本地的停止程序的方法，但你可以通过setTimeout达到相同的效果。

使用：

window.setTimeout(() => {
  Array.from(openCards).forEach(function(card) {
    card.classList.remove('mismatch')
    card.classList.remove('open');
    card.classList.remove('show');
  });
}, 2000);

或者不使用箭头函数

console.log('1');
window.setTimeout(() => {
  console.log('2');
}, 2000);
console.log('3');

- Joe Warner