How do I make a timer that when it is finished, it calls a function in JavaScript?-CodePudding

im trying to create a rock paper scissors game that when you click either rock paper or scissors, the computer chooses weather rock paper or scissors randomly an gives you a result. Im trying to make it so when i press either rock paper or scissors I have to wait 10 seconds (and a timer will pop up of 10 seconds) before it gives me the result of what the computer picked.

I'm trying to create a timer that when finished, it calls another function. The timer is supposed to be 10 seconds long. I have tried using setTimeout() and setInterval() but none of those seemed to work with me as i dint know how to use them properly. This is the code I have for it now. (Im learning ik its pretty bad)

let i = 10 
function myTimer() {
  i--
   console.log(i)
   timerDown.innerText = i
   if (i === 0) {
      timerDown.innerText = ''
     algo()
     i = 10
   }

}

As Well, Here is the rest of the code.

// rock paper siccors
const timerDown = document.getElementById("XP")
const initialMessage = document.getElementById("initialMessage")
const userChoice = document.getElementById("userChoice")
const message = document.getElementById("message")
const computerCard = document.getElementById("computerres")
let paper = false
let rock = false
let scissors = false

//making butons work

initialMessage.innerHTML = 'Rock Paper or Scissors?'

function drawrock() {
rock = true;
initialMessage.innerHTML = ''
userChoice.innerText = 'You chose rock!'
console.log('user has chosen rock');
startCountdown()

};

function drawpaper() {
paper = true 
console.log('user has chosen paper')
initialMessage.innerHTML = ''
userChoice.innerHTML = 'You chose paper!'
startCountdown()

}

function drawscissors() {
scissors = true
userChoice.innerHTML = 'You chose scissors!'
initialMessage.innerHTML = ''
console.log('user has chosen scissors')
setInterval()

}



let i = 10 
function myTimer() {
  i--
   console.log(i)
   timerDown.innerText = i
   if (i === 0) {
      timerDown.innerText = ''
     algo()
     clearInterval(myVar);
     i = 10
   }

}

// make an algorithim that randomizes gameplay

function algo() {
    let computerLogic = ['paper', 'rock', 'scissors'];

   
let Xlogic = computerLogic[Math.floor(Math.random()*computerLogic.length)];

console.log('CL '   Xlogic)

//paper
   if (Xlogic === 'paper' && paper === true){
     console.log('draw')
     message.innerText = "Draw"
    paper = false
    rock = false
    scissors = false
    computerCard.innerText = "The compueter picked "   Xlogic   '!'
    }
   
   else if (Xlogic === 'paper' && scissors === true) {
       console.log('user won')
       message.innerText = "You won!"
       paper = false
    rock = false
    scissors = false
    computerCard.innerText = "The compueter picked "   Xlogic   '!'
   }

   else if (Xlogic === 'paper' && rock === true) {
       console.log('pc won')
       message.innerText = "Computer Won"
       paper = false
    rock = false
    scissors = false
    computerCard.innerText = "The compueter picked "   Xlogic   '!'
   }

   //rock
   else if (Xlogic === 'rock' && rock === true){
    console.log('draw')
    message.innerText = "Draw"
    paper = false
    rock = false
    scissors = false
    computerCard.innerText = "The compueter picked "   Xlogic   '!'
   }
  
  else if (Xlogic === 'rock' && scissors === true) {
      console.log('pc won')
      message.innerText = "Computer Won"
      paper = false
    rock = false
    scissors = false
    computerCard.innerText = "The compueter picked "   Xlogic   '!'
  }

  else if (Xlogic === 'rock' && paper === true) {
      console.log('user won')
      message.innerText = "You won!"
      paper = false
    rock = false
    scissors = false
    computerCard.innerText = "The compueter picked "   Xlogic   '!'
  }

  //scissors
  else if (Xlogic === 'scissors' && scissors === true){
    console.log('draw')
    message.innerText = "Draw"
    paper = false
    rock = false
    scissors = false
    computerCard.innerText = "The compueter picked "   Xlogic   '!'
   }
  
  else if (Xlogic === 'scissors' && rock === true) {
      console.log('user won')
      message.innerText = "You won!"
      paper = false
    rock = false
    scissors = false
    
    computerCard.innerText = "The compueter picked "   Xlogic   '!'
  }

  else if (Xlogic === 'scissors' && paper === true) {
      console.log('pc won')
      message.innerText = "Computer Won"
      paper = false
    rock = false
    scissors = false
    computerCard.innerText = "The compueter picked "   Xlogic   '!'
  }




}

Some help would be great. Cheers (again i just started programming and the code is not good at all)

CodePudding user response：

for setting a timer and running a function (a callback) you can use the setTimeout function.

setTimeout(() => {
  // code to run here    
}, time till you run it in ms)

CodePudding user response：

setTimeout() is probably the best option here. The way setTimeout() works is as follows:

setTimeout(function[, delay, arg1, arg2...]);

// For example:
setTimeout(myFunction, 3000, "abc", 123);

The example function would execute myFunction after 3 seconds with the arguments "abc" and 123.

If you don't want to use a separate function, you can instead use arrow notation to just include the code you want to run.

setTimeout(() => {return "error"}, 3000);

Note that setTimeout() doesn't stop other functions from being run during the duration, so

setTimeout(() => {console.log("Goodbye, World!")}, 10000);
console.log("Hello, World!");

would print

Hello, World!
// ≈10 seconds later
Goodbye, World!

For more information, you can read the MDN docs for setTimeout() here