Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

carvalhobruno

Redirecionar com temporizador

Por , em Javascript

Recommended Posts

carvalhobruno    2

carvalhobruno
Postado

Bom pessoal, a empresa tem um blog, assim que o usuário cadastra seu e-mail, é direcionado pra uma página de sucesso.

 

Nessa página gostaríamos que em 10~15 segundos ele fosse direcionado de volta pro blog, por isso preciso fazer um script em JS pra que isso seja feito.

 

O código que estou usando funciona perfeitamente pra isso:

var time = 15000; 
        for(var i = 15; i > 0; i--)  {
         setTimeout(function() {
         time-=1000
         },  1000);
        }
        
        document.addEventListener("DOMContentLoaded", function(event) { 
   setTimeout(function() {
         window.location.replace("/blog")
         }, 15000);
        $("<p>").text("Voce será direcionado ao blog em " + i + " segundos.").appendTo(".omega");
});

Preciso que esse script também crie um p com o texto a cima. ( Você será direcionado ao blog em X segundos.

 

O problema é que a variável time já está no 0, eu queria que ele fizesse uma contagem regressiva, de 15, 14, 13, 12, 11...

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

exemplo:

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>

<script>
(function(window, document, undefined){
  'use strict';

  document.addEventListener('DOMContentLoaded', function(event) {
    var time = 15;
    var $timeLeft = document.getElementById('timeLeft');

    $timeLeft.innerHTML = time;

    var itv = setInterval(function(){
      $timeLeft.innerHTML = time--;

      if (time === 0) {
        clearTimeout(itv);
        location.href = 'http://wbruno.com.br';
      }
    }, 1000);
  });
}(window, document));
</script>

<p>Você será redirecionado em <span id="timeLeft"></span> segundos.</p>

</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Lucas Medina    17

Lucas Medina
Postado

 

 

Este aqui já deve funcionar.

Mas eu tenho algumas dúvidas:

 

* Existe algum motivo específico pra utilizar dos parâmetros que você utilizou na função? Ou a variável com $ no início?

 

Pergunto somente por eu realmente fiquei com dúvidas, e honestamente digo, ainda não conheço tanto de Javascript quanto gostaria, rs.

 

Não conheço todos os eventos, então não tinha ideia deste DOMContentLoaded. Vi pela documentação do MDN, e parece que ele não é compatível com o Internet Explorer 9, e no IE se utiliza um semelhante, que seria o readystatechange. Eu usei o script que você fez pra adaptar uma versão em JQuery. Testado no IE também!

<script>
  $(document).ready(function(event) {
    var time = 15;
    $('#timeLeft').html(time);

    var itv = setInterval(function(){
      $('#timeLeft').html(time--);
      if (time === 0) {
        clearTimeout(itv);
        location.href = 'http://wbruno.com.br';
      }
    }, 1000);
  });
</script>

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

* Existe algum motivo específico pra utilizar dos parâmetros que você utilizou na função?

redução da resolução de escopo, deixando o script mais rápido para o browser interpretar.

 

Ou a variável com $ no início?

o $ no início é uma convenção para objetos DOM.

 

Não conheço todos os eventos, então não tinha ideia deste DOMContentLoaded. Vi pela documentação do MDN, e parece que ele não é compatível com o Internet Explorer 9, e no IE se utiliza um semelhante, que seria o readystatechange.

sim, exatamente isso.

O que você poderia resolver também, ao apenas fazer:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>

<p>Você será redirecionado em <span id="timeLeft"></span> segundos.</p>

<script>
(function(window, document, undefined){
'use strict';

var time = 15;
var $timeLeft = document.getElementById('timeLeft');

$timeLeft.innerHTML = time;

var itv = setInterval(function(){
$timeLeft.innerHTML = time--;

if (time === 0) {
clearTimeout(itv);
location.href = '[url=]http://wbruno.com.br';[/url]
}
}, 1000);

}(window, document));
</script>


</body>
</html>
sem a menor necessidade de usar jQuery.

 

Note que "tudo o que eu fiz", foi colocar o html antes do javascript.

Isso é o mesmo que o readystate/domcontentloaded faz, na prática.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Lucas Medina    17

Lucas Medina
Postado

 

 

o $ no início é uma convenção para objetos DOM.

 

Entendi! Excelente!

Então é basicamente uma forma legível de se denotar uma seleção do DOM. Bastante prático :D

 

Entendi também o que fez no script. É algo realmente simples, scripts no final do documento = DOM já está pronto. O browserdiet tem dicas sobre isso, e que eu certamente deveria ter lembrado!

 

Quanto à resolução de escopo, não entendi muito bem. Sabe alguma postagem ou referência para algo desse tipo?

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Hum.. acho q posso te explicar em 2 parágrafos:

 

Existem objetos. Objetos possuem métodos, propriedades ou até outros objetos.

Por isso, é possível fazer:

 

 

window.document.location.href

window é um objeto

document é outro objeto filho de window

location é outro objeto

href finalmente é a propriedade

 

Quando declaramos:

location.href somente, o browser vai procurar "de onde saiu" esse location.

Em qual escopo ele foi declarado. Exemplo:

 

var x = 12;
(function(){
   var y = 15;
   console.log(x);
}());
A variavel y está no mesmo escopo do console.log(), mas a variável x não. A variável x, está "um escopo acima".

 

Então, em ordem de conseguir executar o console.log de x, o interpretador vê que x não existe no escopo atual, e sobe um escopo para encontrar x. Se não tivesse encontrado, continuaria subindo, até chegar no objeto global: window.

 

Escopos em javascript são definidos por funções. Por isso que cada "clausure" possui seu próprio escopo. Se eu tentar acessar y fora da clousure, terei um undefined. Pois o y só existe ali dentro, e dali para "baixo"(aninhado), e não para fora (cima).

 

O mesmo vale para os argumentos que passei para a função anônima autoinvocável. Passando window e document, eu diminui a resolução de escopo dentro da function, uma vez que o escopo já estava resolvido (um andar a cima), eu passei como argumento essa referência para dentro, evitando o browser ter que sair e procurar.

 

Fazendo tudo ficar mais simples e rápido. Muito mais simples e rápido do que a explicação. :lol:

Compartilhar este post

Link para o post
Compartilhar em outros sites

Lucas Medina    17

Lucas Medina
Postado

 

Hooo! Agora eu entendi!

 

Eu pude entender um pouco de escopo a partir de um conteúdo sobre Javascript no HTMLDog.

 

Mas o que você explicou agora não chega nem à metade do que eu pude absorver lá quando li.

Eu não tinha ideia de que a resolução do escopo pudesse melhorar o desempenho do código, foi realmente bom saber disso.

 

Embora o código tenha sido bem mais rápido, muito obrigado pela explicação! Valeu bastante ;)

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito