2

Existe alguma de quando um usuário entra numa página, o JavaScript esperar 20 segundos e após esperar esses 20 segundos mostrar um submit em tempo real?

Ou seja, o usuário entraria na página, esperava 20 segundos, após esperar esses 20 segundos em tempo real na página aparecia o submit.

2

3 Respostas 3

8

Você pode usar a função setTimeout() e jQuery para resolver seu problema facilmente.

No HTML

  • style="display:none" - fará o botão ficar invisível no inicio

No JavaScript

  • $('#idSubmit') - representa o seletor do seu elemento
  • .show() - representa a função que no caso é exibir
  • 3000 é o tempo em milisegundos que voce deseja esperar, mantive um tempo de 3 segundos para o exemplo não demorar muito mas voce pode colocar o tempo que quiser 20 segundos seria 20000

Veja o codigo abaixo

$('#idSubmit').hide();

setTimeout(function(){ 
    $('#idSubmit').show();
}, 3000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form id="id" >
    First name:<br>
    <input type="text" name="firstname"> <br>
    
    Last name:<br> 
    <input type="text" name="lastname"> <br>
     
    <input id="idSubmit" type="submit" />
</form>

4

Existe alguma de quando um usuário entra numa página, o JavaScript esperar 20 segundos e após esperar esses 20 segundos mostrar um submit em tempo real?

Para executar uma função após um determinado tempo, utilize a função .setTimeout(callback, delay).

É importante se atentar para o fato de que o parâmetro delay é representado em milisegundos, conforme descrição abaixo:

delay is the number of milliseconds (thousandths of a second) that the function call should be delayed by. If omitted, it defaults to 0. The actual delay may be longer; see Notes below.

Vamos supor que você possui uma função com o nome minhaFuncao, e quer executá-la depois de 20 segundos. Nesse caso você utilizaria a seguinte sintaxe:

setTimeout(minhaFuncao, 20000);

Exemplo

function showSubmit() {
  document.getElementById('submit-btn').style.display = 'block';
}

setTimeout(showSubmit, 2000);
#submit-btn {
  display: none;
}
<input type="submit" id="submit-btn">

3

No exemplo abaixo, utilizo JQuery devido ao uso da função ready().

Tudo que estiver dentro dessa função será executado somente após o carregamento de todos os objetos da página.

Isso é necessário para evitar dessincronização entre as execuções.

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
$().ready(function() {

/**
Tempo em segundos
*/
seconds = 20;

/**
Oculta o botão.
Alternativamente, pode ocultar com CSS também.
*/
$("#btn").hide();

/**
A função setTimeout() cria o delay de execução.
O tempo é medido em milisegundos, por isso, multiplimos por 1000.
*/
setTimeout(function(){$("#btn").show();}, seconds*1000);

});
</script>
</head>
<body>

botão aparece aqui: 
<input type="submit" value="ok" id="btn" />

</body>
</html>
6
  • 1
    Uma correção na explicação: o uso da função $.ready não é necessário para evitar a dessincronização. No seu exemplo em especial, ele deve ser utilizado pelo simples fato de o seu botão estar abaixo do bloco de script. Sem o uso do $.ready nesse caso, o script seria executado antes mesmo de o botão existir.
    – Romulo
    Commented 10/10/2015 às 12:28
  • exatamente pela forma como apresentei, se faz necessário. Há formas diferentes de fazer. Sem o ready corre risco de haver disparo do settimeout antes de todos os elementos carregarem. O risco é pequeno, mas de qualquer forma é um risco. Commented 10/10/2015 às 14:10
  • particularmente prefiro não colocar scripts fora do head, especialmente no body.. deixa o codigo esteticamente “sujo”, mas não quer dizer que um eh mais certo do que outro. É questão de escolha do programador e padrões sob o qual se trabalha. Commented 10/10/2015 às 14:13
  • por isso, discordo do seu comentário, pois coloca o comentário como se fosse correção de um erro. Mas não há erro algum. É um comentário equivocado. Commented 10/10/2015 às 14:14
  • eu recomendo a leitura dos seguintes materiais: Best Practices for Speeding Up Your Web Site e Where is the best place to put <script> tags in HTML markup?
    – Romulo
    Commented 10/10/2015 às 19:42

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .