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 变量