Maximum call stack size exceeded

Criei essa função para fazer uma especie de ‘pisca-pisca’ em uma frase que esta dentro da tag (h4) ao abrir no navegador nada muda e recebo esta mensagem no “inspecionador de elementos”

Mensagem:
Maximum call stack size exceeded

Funcao:

function a(e){
 if(e > 2){
  document.getElementById(“frase”).style.color = “#0000ff”;
  setTimeout(a(1), 800);
 }
 document.getElementById(“frase”).style.color = “#ff0000”;
 e++;
 setTimeout(a(e), 800);
}

Tem duas coisas erradas ai, a primeira é que a função setTimeout recebe como parâmetro uma função e um inteiro que é o tempo em milissegundos, após percorrer este tempo o setTimeout invoca automaticamente a função que foi passada como parâmetro. do jeito que esta, você não chega a invocar a função setTimeout, você invoca a função a primeiro, que se invoca novamente recursivamente até dar o “Maximum call stack size exceeded”.

A segunda coisa é que para piscar precisa que a segunda parte do "#ff0000" esteja dentro de um else, caso contrario, ela sempre será executada e o texto nunca piscara.

o código fica assim:

    function a(e) {
        if (e > 2) {
            document.getElementById("frase").style.color = "#0000ff";
            setTimeout(function () {
                a(1);
            }, 800);
        } else {
            document.getElementById("frase").style.color = "#ff0000";
            e++;
            setTimeout(function () {
                a(e);
            }, 800);
        }
    }
    a(1);

Agora, um modo melhor de resolver este problema é usando a função setInterval, veja um exemplo:

    var aceso = false;
    setInterval(function () {
        document.getElementById("frase").style.color =
                ((aceso = !aceso)) ? "#0000ff" : "#ff0000";
    }, 100);
    // 100 = 0,1 segundos.

aconselho você dar uma olhada na documentação da função setInterval, tem coisas bem legais como o clearInterval, você pode saber mais aqui: https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval

1 curtida