如何让函数一个接一个地启动？

Question

我创造了石头，布，剪刀游戏。战斗结束后，我希望结果在屏幕上显示5秒，然后开始从5开始倒数。这两个功能都应该一个接一个地启动，但我不知道怎么做。我使用setTimeout()尝试了不同的变体，但显然我遗漏了一些东西。我在问这个问题之前做了研究，但找不到任何有用的东西。

JS：

let elements = [
    "../img/scissors.png",
    "../img/rock.png",
    "../img/paper.png",
];
const startBtn = document.querySelector('.start')
const startImg = document.querySelector('.all-elements')
const rules = document.querySelector('.rules')
const phase1 = document.querySelector('.phase-1')
const phase2 = document.querySelector('.phase-2')
const imgs = document.querySelectorAll('.wrapper img')
const opponent = document.querySelector('.opponent-choise')
const result = document.querySelector('.result')
let clicked = false
let time = 5


startBtn.addEventListener('click', ()=>{
    phase1.style.display = "none"
    phase2.style.display = "block"
})


for(let i = 0; i < imgs.length; i++){
    let me = imgs[i]
    me.addEventListener('click', ()=>{
        if(clicked == false){
            clicked = true
            chooseSign(me, imgs)
            countDown()
        }
    })
}

function chooseSign(b, c){
    c.forEach((a)=>{
        a.style.display = "none"
    })
    b.style.display = "block"
    b.style.cursor = "auto"
    displayOpponent()
    checkForWinner(b, opponent)
}

function displayOpponent(){
    let random = Math.floor(Math.random() * 3)
    opponent.style.display = "block"
    opponent.src = elements[random]
}

function checkForWinner(me, opponent){
    let meSrc = me.getAttribute('src')
    let opponentSrc = opponent.getAttribute('src')
    if(me.src == opponent.src){
        let a = "Draw!"
        showWinner(a)
    } else if
        (meSrc == elements[0] && opponentSrc == elements[2] ||
         meSrc == elements[1] && opponentSrc == elements[0] ||
         meSrc == elements[2] && opponentSrc == elements[1])
         {
        let a = "You win!"
        showWinner(a)
    } else {
        let a = "You lose!"
        showWinner(a)
    }
}

function showWinner(a){
    result.textContent = a
    setTimeout('showWinner()', 5000)
}

function countDown(){
    result.textContent = time
    time--
    if(time == -1){
        return
    }
    setTimeout('countDown()', 1000)
    result.textContent = time
}

Answer 1

Javascript setTimeout()函数是异步的，以便不会在延迟的时间间隔内冻结所有的js代码。由于您没有提供minimal reproducible example，我只能猜测您的意图。修改后的代码如下：

let elements = [
"../img/scissors.png",
"../img/rock.png",
"../img/paper.png",
];
const imgs = document.querySelectorAll('.wrapper img')
const startBtn = document.querySelector('.start')
const startImg = document.querySelector('.all-elements')
const rules = document.querySelector('.rules')
const phase1 = document.querySelector('.phase-1')
const phase2 = document.querySelector('.phase-2')
const opponent = document.querySelector('.opponent-choise')
const result = document.querySelector('.result')
let clicked = false
let time = 5


startBtn.addEventListener('click', ()=>{
    phase1.style.display = "none"
    phase2.style.display = "block"
})


for(let i = 0; i < imgs.length; i++){
    let me = imgs[i]
    me.addEventListener('click', ()=>{
        if(clicked == false){
            clicked = true
            chooseSign(me, imgs)
        }
    })
}

function chooseSign(b, c){
    c.forEach((a)=>{
        a.style.display = "none"
    })
    b.style.display = "block"
    b.style.cursor = "auto"
    displayOpponent()
    checkForWinner(b, opponent)
}

function displayOpponent(){
    let random = Math.floor(Math.random() * 3)
    opponent.style.display = "block"
    opponent.src = elements[random]
}

function checkForWinner(me, opponent){
    let meSrc = me.getAttribute('src')
    let opponentSrc = opponent.getAttribute('src')
    if(me.src == opponent.src){
        let a = "Draw!"
        showWinner(a)
    } else if
        (meSrc == elements[0] && opponentSrc == elements[2] ||
         meSrc == elements[1] && opponentSrc == elements[0] ||
         meSrc == elements[2] && opponentSrc == elements[1])
         {
        let a = "You win!"
        setTimeout(showWinner(a), 5000);
    } else {
        let a = "You lose!"
        setTimeout(showWinner(a), 5000);
    }
}

function showWinner(a){
    result.textContent = a;
    setTimeout(countDown(),  5000);
}

function countDown(){
    result.textContent = time
    time--
    if(time == -1){
        return
    }
    result.textContent = time
}

请提供一个最小的可重现示例(即包括您的相关html/css)，以防有任何进一步的问题。

Answer 2

以防有人怀疑我解决了这个问题。这是为那些需要答案的人准备的代码。如果我没有以最优的方式提供答案，很抱歉。

JS：

let elements = [
    "../img/scissors.png",
    "../img/rock.png",
    "../img/paper.png",
];
const startBtn = document.querySelector('.start')
const exitBtn = document.querySelector('.exit')
const startImg = document.querySelector('.all-elements')
const rules = document.querySelector('.rules')
const phase1 = document.querySelector('.phase-1')
const phase2 = document.querySelector('.phase-2')
const imgs = document.querySelectorAll('.wrapper img')
const opponent = document.querySelector('.opponent-choise')
const result = document.querySelector('.result')
let clicked = false
let time = 4 //put one more second to start on time
let refreshedTime = time
let a


startBtn.addEventListener('click', ()=>{
    phase1.style.display = "none"
    phase2.style.display = "block"
    result.textContent = "Choose a sign!"
})

exitBtn.addEventListener('click', ()=>{
    if(clicked == false){
        phase1.style.display = "block"
        phase2.style.display = "none"
    }
})

for(let i = 0; i < imgs.length; i++){
    let me = imgs[i]
    me.addEventListener('click', ()=>{
        setTimeout(()=>{
            if(clicked == false){
                clicked = true
                time = refreshedTime
                chooseSign(me, imgs)
                setTimeout(countDown, 2000)
            }
        }, 1000)
    })
}

function chooseSign(b, c){
    c.forEach((a)=>{
        a.style.display = "none"
    })
    b.style.display = "block"
    b.style.cursor = "auto"
    displayOpponent()
    checkForWinner(b, opponent)
}

function displayOpponent(){
    let random = Math.floor(Math.random() * 3)
    opponent.style.display = "block"
    opponent.src = elements[random]
}

function checkForWinner(me, opponent){
    let meSrc = me.getAttribute('src')
    let opponentSrc = opponent.getAttribute('src')
    if(me.src == opponent.src){
        a = "Draw!"
        result.style.color = "yellow"
    } else if
        (meSrc == elements[0] && opponentSrc == elements[2] ||
         meSrc == elements[1] && opponentSrc == elements[0] ||
         meSrc == elements[2] && opponentSrc == elements[1])
         {
        a = "You win!"
        result.style.color = "green"
    } else {
        a = "You lose!"
        result.style.color = "red"
    }
    showWinner(a)
}

function showWinner(a){
    result.textContent = a
}

function countDown(){
    result.style.color = "black"
    time--
    if(time == -1){
        clicked = false
        imgs.forEach((img)=>{
            img.style.display = "block"
            img.style.cursor = "pointer"
        })
        opponent.style.display = "none"
        result.textContent = "Choose a sign!"
        return
    }
    setTimeout('countDown()', 1000)
    result.textContent = time
}