Vue 3无法清除timeout

Question

我正在学习Vue 3做记忆游戏。我有一个代理数组的对象(卡片)，对象有这样的格式:

{
"id": "01",
"image": "01.jpg",
"isFlipped": false
}
{
"id": "07",
"image": "01.jpg",
"isFlipped": false
}

My flipCard msamthodes turns card。isFlipped:为真，显示图像。当两张牌露出来的时候，就叫它们比较。如果有匹配牌，不要翻转。如果没有匹配牌，在setTimeOut 1.5秒后重新翻转。如果另一辆车在setTimeOut的1.5秒之前被翻转，我需要清除这个timeOut来在翻转下一张牌之前(在1.5秒之前)翻转2张牌。2个月来，我一直在努力做到这一点。有没有人能帮我一下，谢谢。

我的组件

// flip 2 cards and compare them
function flipCard(card) {
clearTimeout(timeoutId.value);
card.isFlipped = true;
clicksNumber.value += 1;
comparedCards.value.push(card);
if (comparedCards.value.length === 2) {
compare(comparedCards.value[0], comparedCards.value[1]);
}
}
let timeoutId = ref();
function unflip(card) {
// Set a timeout and assign the ID to the timeoutId variable
timeoutId.value = setTimeout(() => {
card.isFlipped = false;
}, 1500);
}
// compares 2 flipped cards
function compare(a, b) {
if (a.image == b.image) {
found.value.push(a, b);
// remove found values from not found array
notFound.value = notFound.value.filter(
(item) => !found.value.includes(item)
);
} else {
comparedCards.value.forEach((card) => {
unflip(card); //unflips cards agter 1.5 secs
});
}
comparedCards.value = [];
}

我尝试初始化总点击数和点击次数，每次我们有2张牌比较(stopClick)

let clicksNumber = ref(0);
let stopClick = ref();

，然后当到达2卡比较得到点击n°时，发生这种情况并将其与totalClicks进行比较如果它们不同，调用clearartimeout (timeoutId)

function flipCard(card) {
clearTimeout(timeoutId.value);
card.isFlipped = true;
clicksNumber.value += 1;
comparedCards.value.push(card);
if (comparedCards.value.length === 2) {
stopClick.value = clicksNumber.value;
compare(comparedCards.value[0], comparedCards.value[1]);
}
}
watch(clicksNumber, (stopClick) => {
if (clicksNumber.value != stopClick) {
clearTimeout(timeoutId)
}
});

我也尝试了20种不同的东西，但都不起作用…: - (

我没有任何错误，只是当点击前1.5秒我可以有3 4或5张牌在同一时间翻转

Answer 1

由于comparedCards包含两个条目，因此在这里设置两个超时:

comparedCards.value.forEach((card) => {
unflip(card);
});

因此timeoutId将只包含最后一个超时id。

要解决这个问题，您可以将timeoutId设置为数组，或更改unflip()以处理两张牌:

function unflip(cards){
timeoutId.value = setTimeout(() => {
cards.forEach(card => card.isFlipped = false);
}, 1500);
}

顺便说一句。我不认为把timeoutId作为ref对你有多大帮助——你永远不会在模板中使用它。

---

第二个问题是，您实际上不只是想取消超时。如果出现了两张不匹配的牌，玩家又翻了另一张牌，你不仅想取消等待再次翻前两张牌的时间，还想马上把它们翻出来:

let timeoutId = null; // <--- doesn't have to be a ref
function compare(a, b) {
if (a.image == b.image) {
...
comparedCards.value = []; // <--- cards match, remove right away
} else {
timeoutId = setTimeout(unflip, 1500); // <--- wait to unflip
}
// <--- do not clear compared cards here
}

function flipCard(card) {
if(comparedCards.value.length >= 2){ // <-- cannot have more than two cards open at the same time
unflip() //<--- abort timeout, unflip right away 
}
if (card.isFlipped) { //<--- prevent flipping the same card twice
return
}
card.isFlipped = true;
comparedCards.value.push(card);
if (comparedCards.value.length === 2) {
compare(...comparedCards.value);
}
}
function unflip() {
if(timeoutId){
clearTimeout(timeoutId);
timeoutId = null;
}
comparedCards.value.forEach(card => card.isFlipped = false); // unflip all opened cards
comparedCards.value = [] // no more open cards
}

我可能会将comparedCards重命名为unflippedCards或其他。