Does text execution flash a certain number of times?

Question

I am trying to disable this blinking text after 3 seconds (or 3-5 blinks). I set the blinking speed to the desired speed, but I can’t figure out how to stop it.

Here is the code:

$('.blink').each(function() {
var elem = $(this);
setInterval(function() {
    if (elem.css('visibility') == 'hidden') {
        elem.css('visibility', 'visible');
    } else {
        elem.css('visibility', 'hidden');
    }    
}, 200);
});

Any suggestions?

I compiled a jQuery script here: http://jsfiddle.net/M4Fcd/173/

Answer 1

setInterval continues indefinitely - or until it stops.

What you need to do is to capture the ID interval when creating the interval, and then clear the interval after you finish with it.

var intervalID = setInterval(function....);

// when done
clearInterval(intervalID);

In your particular case:

$('.blink').each(function() {
  var elem = $(this);
  // count the blinks
  var count = 1;
  var intervalId = setInterval(function() {
    if (elem.css('visibility') == 'hidden') {
        elem.css('visibility', 'visible');
        // increment counter when showing to count # of blinks and stop when visible
        if (count++ === 3) {
            clearInterval(intervalId);
        }
    } else {
        elem.css('visibility', 'hidden');
    }    
  }, 200);
});

Updated fiddle http://jsfiddle.net/M4Fcd/186/

Answer 2

$('.blink').each(function() {
    var elem = $(this);
    refreshIntervalId = setInterval(function() {
        if (elem.css('visibility') == 'hidden') {
            elem.css('visibility', 'visible');
        } else {
            elem.css('visibility', 'hidden');
        }    
    }, 200);
});


setTimeout(function(){
    clearInterval(refreshIntervalId);
}, 3000)

: http://jsfiddle.net/M4Fcd/176/

Answer 3

fadeIn/fadeOut,

$('.blink').each(function() {
    var elem = $(this);
    elem.fadeOut(100)
        .fadeIn(100)
        .fadeOut(100)
        .fadeIn(100)
        .fadeOut(100)
        .fadeIn(100);
});

jsFiddle

Answer 4

, . css : , , , / , hasClass.

$('.blink').each(function() {
    var elem = $(this),
        timer = 0,
        interval = 200,
        stopAfter = 3000,
        intervalId = setInterval(function() {
            elem.toggleClass('blink');
            if(timer > stopAfter && !elem.hasClass('blink')) {
                clearInterval(intervalId);
            }
            timer += interval;
        }, interval);
});

: http://jsfiddle.net/M4Fcd/183/

---

, , .

$('.blink').each(function() {
    var elem = $(this),
        timer = 0,
        interval = 200,
        stopAfter = 3000;
    refreshIntervalId = setInterval(function() {
        if (elem.css('visibility') == 'hidden') {
            elem.css('visibility', 'visible');
            if(timer > stopAfter) {
                clearInterval(refreshIntervalId);
            }
        } else {
            elem.css('visibility', 'hidden');
        }
        timer += interval;
    }, interval);
});

: http://jsfiddle.net/M4Fcd/180/

Answer 5

:

var i = 0;
var blink;
$('.blink').each(function() {
  var elem = $(this);
  blink = setInterval(function() {
      if (elem.css('visibility') == 'hidden') {
          elem.css('visibility', 'visible');
          i++;
          if(i >= 3){
              clearInterval(blink);
          }
      } else {
        elem.css('visibility', 'hidden');
      }    
   }, 200);
});

Fiddle

Answer 6

, .

function blinkElement(elm, interval, duration) {

    elm.style.visibility = (elm.style.visibility === "hidden" ? "visible" : "hidden");

    if (duration > 0) {
        setTimeout(blinkElement, interval, elm, interval, duration - interval);
    } else {
        elm.style.visibility = "visible";
    }
}

3 200 .

blinkElement(element, 200, 3000);