CODEWITHSUNDEEP
javascriptjqueryhtmlcss
GogoManTV
GogoManTV

Reputation: 25

Javascript blinking with setTimeouts

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.

Upvotes: 0

Views: 6023

Answers (4)

nevspike
nevspike

Reputation: 1

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!

Upvotes: 0

xec
xec

Reputation: 18024

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>

Upvotes: 5

A.B
A.B

Reputation: 20445

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);
 }

Upvotes: 0

Vitorino fernandes
Vitorino fernandes

Reputation: 15951

you can make it simple by toggling a class

.hide{
   display:none;
}

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

JS Fiddle

Upvotes: 2

Related Questions