Javascript 使.css基于毫秒重复多次-干

我正在努力学习改进我的代码，而不是重复我自己。我正试图使用

.css（）

在消失之前让一个美学设计元素“闪光”。我有工作的结果，但我相信有更好/更短的方法来写这篇文章

目前，我正在设置四个间隔来处理CSS的更改

setTimeout( function(){
   $(outputID).css('border-right','2px solid #fff');
},500);
setTimeout( function(){
   $(outputID).css('border-right','2px solid #343434');
},1000);
setTimeout( function(){
   $(outputID).css('border-right','2px solid #fff');
},1500);
setTimeout( function(){
   $(outputID).css('border-right','2px solid #343434');
},2000);

---

使用干燥原理，最好的方法是什么？循环500毫秒间隔，然后根据2000毫秒取消？以某种方式使用

.delay（）

可以使用数据驱动的方法

var objA = [{
    duration: 500,
    style: '2px solid #fff'
}, {
    duration: 1000,
    style: '2px solid #343434'
}, {
    duration: 1500,
    style: '2px solid #fff'
}, {
    duration: 2000,
    style: '2px solid #343434'
}];

for (var i = 0; i < objA.length; i++) {
    (function(i) {
        setTimeout(function() {
            $(outputID).css('border-right', objA[i].style);
        }, objA[i].duration);
    })(i);
}

var objA=[{
持续时间：500，
款式：“2件纯色#fff”
}, {
持续时间：1000，
款式：“2件纯色#3434”
}, {
持续时间：1500，
款式：“2件纯色#fff”
}, {
期限：2000年，
款式：“2件纯色#3434”
}];
对于（变量i=0；i

---

确保在循环中使用一个

闭包

，以保留

i

变量

实现这一点的方法有很多。使用带有一点jQuery的“纯”JavaScript，您可以执行以下操作：

// flash an element and call the callback when done
var flash = function(element, cb) {
    var counter = 0;
    var max = 4;
    var state = false;

    var animate = function() {
        // assume we have to css classes "off" and "on"
        if (state)
            element.removeClass("on").addClass("off");
        else
            element.removeClass("off").addClass("on");
        state = !state;

        counter++;
        if (counter<max)
            setTimeout(animate, 500);
        else {
            // make sure we end up in "off" state
            element.removeClass("on").addClass("off");
            if (cb instanceof Function) cb();
        }
    }

    animate();
}

// use it like
flash(myElement, function () {
    // we can even do stuff when flashing has stopped, how cool is that!
});

//刷新元素并在完成时调用回调
var闪存=功能（元件，cb）{
var计数器=0；
var max=4；
var状态=假；
var animate=函数（）{
//假设我们必须关闭和打开css类
如果（州）
元素.removeClass（“开”）.addClass（“关”）；
其他的
元素.removeClass（“关闭”）.addClass（“打开”）；
状态=！状态；
计数器++；
如果（counter详细说明我对jquery动画的评论：

$(outputID)
    .delay(500)
    .animate({ borderColor: "#fff" }, 10)
    .delay(500)
    .animate({ borderColor: "#343434" }, 10)
    .delay(500)
    .animate({ borderColor: "#fff" }, 10)
    .delay(500)
    .animate({ borderColor: "#343434" }, 10)

你可以使用变量来确定延迟时间，500个匹配问题超时，10个减少动画效果，所以闪亮而不是脉冲。
 
你好，如果你考虑最好的方法，那么根据我，你可以使用CSS动画关键帧。
但是，如果您只想通过javascript完成这项工作，那么您可以使用ammarcse的答案。
纯CSS可以通过来处理这类任务。我创建了一个，但需要进行调整（特别是因为我忽略了供应商前缀）。
基本上可以归结为：

@keyframes borderblink {
  0% {
    border: 2px solid blue;
  }
  49% {
    border: 2px solid blue;
  }
  50% {
    border: 2px solid white;
  }
  100% {
    border: 2px solid white;
  }

}

.mybox.border-animated {
     border: 2px solid blue;
     animation-name: borderblink;
     animation-duration: 0.4s;
     animation-iteration-count: 10;
}

如果您想支持不包含此功能的浏览器（IE8+9，Opera Mini），您可以用于功能检测，并且只在需要时调用您的javascript解决方案。但由于它只是一个视觉上的好东西，如果您还没有包含Modernizer，我可能不会走那么远。
当css可以使用
关键帧时，为什么要使用javascript
？setInterval（函数（）{//you somewhere}，3000）；Don't-repeat-someone-others可能意味着您希望使用jquery animate:或jquery ui效果：@Ben我尝试使用关键帧，但它提供了淡入淡出的效果，而不是闪烁的效果。顺便说一句，我还没有测试过，因此如果发现任何错误，请报告：）哈哈，比起我的答案，我更喜欢这个……整洁：）我首先尝试了这种解决方案。但是它不会闪烁（例如开或关）它会在两者之间衰减。即使在你的例子中，虽然速度非常快，但它不会从开到关。它会在两个动画之间衰减。我正在寻找一个灯光开关，而这个解决方案是一个调光开关。
@keyframes
是一种方法。只要调整序列。使用JS进行这将是一种犯罪。@Francesca这确实是一种犯罪只需设置正确的关键帧。我更新了小提琴和答案。