It is necessary that the text flickered in different colors. But he ended up just blue. I do not understand, I tried already in different ways. It still does not come out. setTimout should start the function with a delay. As a result, the text is just blue. How to correctly write it in the code? Thank!

$(document).on('ready', function (){ var link = $('.flashing'); function painting() { link.css("color", "yellow"); }; function painting2() { link.css("color", "red"); }; function painting3() { link.css("color", "blue"); }; setInterval(function(){ painting(); setTimeout(painting2(), 700); setTimeout(painting3(), 1400); }, 1000); });
  • one
    setTimeout first takes a function. You have the same classic mistake: calling a function instead of passing it - Grundy

2 answers 2

In your code

 setTimeout(painting2(), 700);

is equivalent to

 painting2(); setTimeout(undefined, 700);

This is how it should be ( https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout ):

 var link = $("span"); function painting() { link.css("color", "yellow"); }; function painting2() { link.css("color", "red"); }; function painting3() { link.css("color", "blue"); }; setInterval(function(){ painting(); setTimeout(painting2, 700); // not painting2() setTimeout(painting3, 1400); // not painting3() }, 1000); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <span>Two roads diverged in yellow wood ...</span>

  • one
    every second timeout trigger will match - Grundy
  • @Grundy I know, however, the three colors are clearly visible - Igor
  • one
    It is worth adding explanations in response, about what was wrong and why - Grundy

I do not know specifically your situation, but it is more correct to do this with the help of css -

 .сhristmas { animation: сhristmas 1s linear 0ms infinite; } @keyframes сhristmas { 0% { color: red; } 40% { color: green; } 100% { color: blue; } } 
 <span class="сhristmas">Happy New Year</span>