Lutando contra o tempo com setTimeout.... | JavaScript

Solucionado (ver solução)

Solucionado
(ver solução)

3
respostas

por Wilton Ribeiro

| 127.9k xp | 57 posts

Olá, Eu tentei criar um timer que mostraria na tela a passagem dos segundos e iria parar quando eu clicasse no botão "Stop", mas a única coisa que acontece quando eu executo é o computador "dar pau" e eu ter que reiniciar ele...

Onde eu estou errando?

<!DOCTYPE html>
<html>
    <head>
        <title>Timer</title>
        <meta charset="utf-8">

        <style>
            *{
                box-sizing: border-box;
            }
            .timer{
                font-size: 4em;
                text-align: center;
                line-height: 400px;
                color: blue;
                margin-bottom: 50px;
            }
            .botao{
                width: 100px;
                height: 75px;
                border: none;
                background-color: red;
                color: white;
                padding: 15px;
                margin: 0 auto;
                font-size: 2em;
                display: block;
            }
        </style>
    </head>

    <body>
        <div class="timer">
            No time.
        </div>
        <button class="botao">Stop</button>
    </body>

    <script>

        document.querySelector(".botao").addEventListener("click",stopButton);

        for(i = 0; i < Infinity;){
            setTimeout(function(){
                i++;
                relogio.textContent = i;
                stop();
            },1000);
        }

        var relogio = document.querySelector(".timer");
        var i = 0;
        var stop = false;

        function stop(st = stop){
            if(st){
                alert("Timer is stopped!");
                break;
            }
        }

        function stopButton(){
            stop = true;
        }

    </script>
</html>

3 respostas

solução!

por Gabriel Leite

| 3484k xp | 5398 posts

Instrutor

15/05/2018

Boa tarde, Wilton! Como vai?

O problema é o ser for infinito!

for(i = 0; i < Infinity;){
}

Esse cara aí é um loop infinito e está estourando o cabeçote do seu PC!

Pra fazer o que vc quer, é preciso usar o setInterval()!

var meuTimer = setInterval(function(){ funcaoTimer() }, 1000);

function funcaoTimer() {
    // faz o que vc quiser...
}

function stop() {
    clearInterval(meuTimer);
}

Pegou a ideia?

Para saber mais sobre o setInterval():

https://www.w3schools.com/jsref/met_win_setinterval.asp

Grande abraço e bons estudos!

por Wilton Ribeiro

| 127.9k xp | 57 posts

15/05/2018

Olá Gabriel,

Valeu pela ajuda, mas qual seria então a diferença entre setTimeout e setInterval? (além de repetir indefinidamente)

por Gabriel Leite

| 3484k xp | 5398 posts

Instrutor

15/05/2018

A diferença é só essa mesmo.

Por nada, Wilton! Sempre que tiver qualquer dúvida é só mandar aqui no fórum!

Grande abraço e bons estudos!