Alternar valor de variavel com setInterval é possivel?

RickSilva · Dezembro 1, 2020

Bom, preciso criar uma funçao que faz uma variavel string ter um valor durante um periodo de 5 segundos e depois outro valor durante os proximos 5 segundos, fazendo isso a todo momento. Por exemplo: Uma variavel cor que tenha como valor "preto" durante 5 segundos e depois receba o valor "branco".

RickSilva · Dezembro 1, 2020

Eu queria agradeçer a respostas de todos aqui que me ajudaram, fico feliz por ter tantas pessoas boas no mundo, mas eu consegui resolver meu problema, foi até facil.

var cor = "Black";

setInterval(()=>{
	if(cor == "Black"){
    	//executa o codigo necessario
      	cor = "White";
   	else{
      	//executa o codigo necessario
      	cor = "Black";
    }
}, 5000);

wanderval · Dezembro 2, 2020

Eu faria diferente, assim você não aplica lógica para cores e sim de forma generica e pode mudar a cor e a velocidade e a sequencia de cores

HTML:

<body>
  <span id="text-highlight">TEST OPA</span>
  
  <span id="text-highlight2">TEST OPA 2</span>
</body>

JS:

function highlightTextColor(palleteColor, fieldId, time=5000) {
  let index = 0;
  setInterval(()=> {
	changeColor(palleteColor[index], fieldId);
    index++;
  
    if(index === palleteColor.length) {
      index = 0;
    }
  }, time);
}

  
function changeColor(color, fieldId) {
  document.getElementById(fieldId).style.color = color;
}


highlightTextColor(['pink', 'red', 'purple', 'blue', 'darkblue'], 'text-highlight', 1000);

highlightTextColor(['darkred', 'darkblue', 'red'], 'text-highlight2', 200);