Javascript blinking with setTimeouts

Question

Helllo i am getting problem with blinking every 0.5 seconds. I start my code with #blink display= "inline" but it always stays inline. When starting my code, i call startBlinking.

    function startBlinking() {
    setInterval(function () { 
        blink();
    }, 1000);
}

function blink() {
    setTimeout(function () {
        document.getElementById('blink').style.display = "none";
    }, 500);
    setTimeout(function () {
        document.getElementById('blink').style.display = "inline";
    }, 500);
}

Can you help me? Thanks.

You can do this strictly with css as well. http://stackoverflow.com/a/16012979/2011623 — Matt R, Oct 01 '14 at 18:39

xec · Answer 1 · 2014-10-01T19:37:50.407

The problem with your attemt is that you're setting the same timeout length for both hiding and showing the element, meaning it will hide and show again at the same time! Remove one and it should work:

function startBlinking() {
  setInterval(function () { 
    blink();
  }, 1000);
}
function blink() {
  // note no timeout for the hiding part
  document.getElementById('blink').style.display = "none";
  setTimeout(function () {
    document.getElementById('blink').style.display = "inline";
  }, 500);
}

startBlinking();

<div id="blink">blink</div>
<p>some text following</p>

As you can tell, this causes the following content to jump. We are also fetching the element every time we're hiding or showing it. Better to swap to using visibility and make the function a bit more flexible:

function blink(element, time) {
  // using visibility: hidden; instead of display: none;
  // allows the element to keep its rendering space
  element.style.visibility = "hidden";
  setTimeout(function () {
    element.style.visibility = "visible";
  }, time);
  setTimeout(function () {
    blink(element, time); // recurse
  }, time * 2);
}

// query the DOM for element once instead of every iteration
blink(document.getElementById("blink"), 500);

<div id="blink">blink</div>
<p>following content stays put</p>

You might also want to be able to stop the blinking at some point

function blink(element, time) {
  function loop(){
    element.style.visibility = "hidden";
    setTimeout(function () {
      element.style.visibility = "visible";
    }, time);
    timer = setTimeout(function () {
      loop();
    }, time * 2);
    cleared = false;
  }

  var timer, cleared = true;

  // expose methods
  return {
    start: function() {
      if (cleared) loop();
    },
    stop: function() {
      clearTimeout(timer);
      cleared = true;
    }
  };
}

var blinking = blink(document.getElementById("blink"), 500);

document.getElementById("start").addEventListener("click", function(){
  blinking.start();
});
document.getElementById("stop").addEventListener("click", function(){
  blinking.stop();
});

<div id="blink">blink div</div>
<button id="start">start blinking</button><br />
<button id="stop">stop blinking</button>

score 2 · Answer 2 · answered Oct 01 '14 at 18:38

2

you can make it simple by toggling a class

.hide{
   display:none;
}

setInterval(function () { 
    $('.blink').toggleClass('hide')
}, 500);

JS Fiddle

answered Oct 01 '14 at 18:38

Vitorino fernandes

15,794
3
20
39

score 0 · Answer 3 · answered Oct 01 '14 at 18:39

Just call it once, setTimeout() is ripping it out of the thread so it gets set right back to inline.

function blink() {
    setTimeout(function () {
        if (document.getElementById('blink').style.display === 'inline') {
            document.getElementById('blink').style.display = "none";
        } else {
            document.getElementById('blink').style.display = "inline";
        }
    }, 500);
}

score 0 · Answer 4 · answered Oct 01 '14 at 18:42

you have messed up the event que of javascript, why dont you try this

function startBlinking() {
  initial = 'inline';
  index = 0;
setInterval(function () { 
    if(index==2){
     initial = (initial=='none')?'block':'none';
    document.getElementById('blink').style.display = initial;
    index=0;
     }

index++;
}, 1000);
 }

score 0 · Answer 5 · answered Oct 16 '15 at 08:44

0

For the jQuery fans:

you can use the 'pulsate' effect

http://jqueryui.com/effect/

This may or may not achieve the exact blinking you need but it's a lot simpler!

answered Oct 16 '15 at 08:44

nevspike

1
1

Javascript blinking with setTimeouts

5 Answers5