How do I use the setTimeout() method to delay the appearance of an Alert in Javascript?

Asked

Viewed 280 times

1

Good afternoon, at this time I am developing a javascript, html and css project. It is the game of the Rooster, the game works only that I need the Alert of victory or draw only appear after the X or the O. And what is happening is that the Alert appears 1º that the image. After searching I found the setTimeout() method, but I’m not sure how to use it.

I’ll put all the code I have so far.

Thank you very much

var jogador = 'X';
var empate = 0;


function vJogo (id){
	var src = vSrc(id);
	var pc = document.getElementById('pc').checked;
	

	if (src=="branco.jpg") {
		document.getElementById(id).src="images/" + jogador + ".jpg";

		empate++;

	if (vencedor()){
		alert("Fim do jogo! Parabéns !!!  Venceu o "+ jogador );
	
	
		return;
	}	

	if(empate >= 9){
	alert("Empate !!!");

	
	return;

}



		if (jogador =='X') {
			jogador = 'O';
		}else{
			jogador = 'X';
		}
	}
	if(pc && jogador == 'O'){
		vJogo(computadorJoga());
	}
}
function computadorJoga(){
	if (vSrc('cel4')=='branco.jpg') {
		return 'cel4' ;
	}
	
	return 'cel' + (Math.floor(Math.random()*9)+1);

}
function vSrc(id){
	var src = document.getElementById(id).src;
	return src.substring(src.length -10, src.length);
}	
function vencedor (){
	if ((vSrc('cel0')==vSrc('cel1')) && (vSrc('cel0')== vSrc('cel2')) && vSrc('cel0') !='branco.jpg') {
		return true;
	}
	if ((vSrc('cel3')==vSrc('cel4')) && (vSrc('cel3')== vSrc('cel5')) && vSrc('cel3') !='branco.jpg') {
		return true;
	}
	if ((vSrc('cel6')==vSrc('cel7')) && (vSrc('cel6')== vSrc('cel8')) && vSrc('cel6') !='branco.jpg') {
		return true;
	}
	if ((vSrc('cel0')==vSrc('cel3')) && (vSrc('cel0')== vSrc('cel6')) && vSrc('cel0') !='branco.jpg') {
		return true;
	}
	if ((vSrc('cel1')==vSrc('cel4')) && (vSrc('cel1')== vSrc('cel7')) && vSrc('cel1') !='branco.jpg') {
		return true;
	}
	if ((vSrc('cel2')==vSrc('cel5')) && (vSrc('cel2')== vSrc('cel8')) && vSrc('cel2') !='branco.jpg') {
		return true;
	}
	if ((vSrc('cel0')==vSrc('cel4')) && (vSrc('cel0')== vSrc('cel8')) && vSrc('cel0') !='branco.jpg') {
		return true;
	}
	if ((vSrc('cel2')==vSrc('cel4')) && (vSrc('cel2')== vSrc('cel6')) && vSrc('cel2') !='branco.jpg') {
		return true;
	}
	
	
	return false;
}



function novoJogo(){
	location.reload();
}
body{
	background:silver;
}
h1{
	font-size:40px;
	color: bold;
	text-align: center;
	text-shadow: 3px 4px 3px red;
}
h3{
	color: bold;
}
table{
	width: 450px;
	height:300px;
	border:2px solid red;
	border-spacing: 5px;
	margin:auto;
	box-shadow: 3px 3px 3px silver;

}
table tr { 
	background-color: silver;
 
	
}
table tr td {
		text-align:center; 
		width:33.33%}


img {
	border-radius: 10px;
	box-shadow: 0px 17px 10px -10px rgba(0,0,0,0.4);
	cursor: pointer;
	transition: all ease-in-out 300ms;
}		
	input{
		border-color: red;
		margin-left: 200px;
		
	}
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<script type="text/javascript" src="js/funcao.js"></script>
	<title>Jogo do Galo</title>
</head>
<body>
<div>
	<h1>Jogo do Galo</h1>
	<h3>Computador</h3>
	<input type="checkbox" name="checkbox" id="pc" >
	<table>
		<tr>
			<td ><img src="images/branco.jpg" id="cel0" onclick="vJogo(this.id)"></td>			
			<td><img src="images/branco.jpg" id="cel1" onclick="vJogo(this.id)"></td>
			<td><img src="images/branco.jpg" id="cel2" onclick="vJogo(this.id)"></td>
		</tr>

		<tr>
			<td ><img src="images/branco.jpg" id="cel3" onclick="vJogo(this.id)"></td>
			<td><img src="images/branco.jpg" id="cel4" onclick="vJogo(this.id)"></td>
			<td ><img src="images/branco.jpg" id="cel5" onclick="vJogo(this.id)"></td>	
		</tr>

		<tr>
			<td ><img src="images/branco.jpg" id="cel6" onclick="vJogo(this.id)"></td>
			<td ><img src="images/branco.jpg" id="cel7" onclick="vJogo(this.id)"></td>
			<td ><img src="images/branco.jpg" id="cel8" onclick="vJogo(this.id)"></td>
		</tr>
	</table>
	<input type="button" value="NOVO JOGO" name="botao"  id="botao" onclick="novoJogo()">
</div >
</body>
</html>

javascript html css alert settimeout

1 answer

3

You can do it this way: define a function in which you will do the alert().

function minhaFuncao() {
    alert('Chegou aqui.');
}

Now, you can call the function setTimeout passing as first parameter a function to be executed and as second parameter the time to wait to call this function in milliseconds.

setTimeout(minhaFuncao, 4000);

In the above example, the function minhaFuncao will be executed after 4 seconds.

  • Thank you very much Phelipe, it already worked.

Browser other questions tagged javascript html css alert settimeout

You are not signed in. Login or sign up in order to post.