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