Javascript 使文本闪烁一定次数？

我正试图使这个闪烁的文本在3秒（或3-5次闪烁）后停止。我已经将眨眼频率设置为正确的速度，但不知道如何使其停止

代码如下：

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

有什么建议吗

---

我在这里编译了一个jqueryfiddle:

setInterval将无限期地继续，或者直到停止

您需要做的是在创建间隔时捕获intervalID，然后在使用完间隔后清除它

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

// when done
clearInterval(intervalID);

在您的特殊情况下：

$('.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);
});

更新小提琴

---

小提琴：

你也可以像这样使用fadeIn/fadeOut

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

---

好的，有更好的方法。您只需切换具有可见性的css类：hidden，代码会变得更简单，如果您想在可见/不可见时停止，只需使用hasClass进行检查

小提琴：

---

现在你可以在它可见或不可见时停止它，但想法是一样的

$('.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);
});

小提琴：试试这个：

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

---

我想我的答案最短

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

以200毫秒的速度闪烁3秒

blinkElement(element, 200, 3000);

---

使用

？…只是开玩笑：）使用jquery pulsate你可以改变速度/效果/风格/所有这些<代码>元素效应（“脉动”{次：5}，3000）非常精确的方法，易于管理！很高兴知道它不会以隐身结束——可能应该在问题中提到这一点。我将小提琴和答案更新为只计算可见的次数，这样你可以说3次闪烁，无论它是开始隐藏还是可见，都是一致的

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

blinkElement(element, 200, 3000);