javascript - 使 .css 根据毫秒重复多次 - DRY

Question

我正在努力学习改进我的代码，而不是重复自己。我正在尝试使用 .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);

使用 DRY 原则，最好的方法是什么？循环 500 毫秒间隔，然后基于 2000 毫秒取消？以某种方式使用 .delay()？

Answer 1

您可以使用数据驱动的方法

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

确保使用 IIFE 在循环中创建一个闭包保留 i 变量