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 函数是在 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 = [];
            }
        }
    }
}

Answer 1

承诺比

setTimeout

更容易处理。如果您想使用类似您所描述的

sleep

之类的内容，请定义一个返回 Promise 的函数，该 Promise 在输入的 ms 之后解析：

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

和回调相比，它会让代码更加扁平。

Answer 2

https://developer.mozilla.org/ro/docs/Web/API/window.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');

Answer 3

使用 Node.js，这对我有用：

创建一个在睡眠时间后解析的新函数：

sleep(ms) {
        return new Promise(resolve => setTimeout(resolve, ms));
      }

要使用它，只需在异步函数中调用该函数即可：

async foobar() {
    await sleep(1000)
}