如何使此javascript代码更简洁明了？ （div闪烁颜色）

Question

function flash(color){
    var count = 0;
    var interval = setInterval(function() {
        if (++count === 7) {
            window.clearInterval(interval);
        }
        else {
            if (count % 2 == 0) {
                $('#row').css({'background-color':'white'})
            }
            else {
                $('#row').css({'background-color':color})
            }
        }
    }, 1000);
}

应该闪烁3次（每秒亮一秒钟，然后熄灭一秒钟）。有什么方法可以使它更简洁吗？同样，“白色”仅表示没有颜色，因此也许最好不使用颜色？谢谢。

Answer 1

我爱我一些ES6。

const flash = color => {
  let count = 0;
  const interval = setInterval(() => {
    if (++count === 7) clearInterval(interval);
    else $('#row').css('background-color', count % 2 ? color : 'white');
  }, 1000);
}

Answer 2

“简洁”和“简洁”在某种程度上是主观术语，在将它们等同于“最低界限”方面，我与其他答案有所不同。

在这种情况下，我建议您根据DRY原则确定要进行哪些更改：不要重复自己。创建DRY代码的方法称为“语义压缩”，我们可以在此处应用它。

首先，查找要重用的代码部分。只有一部分，这是您的jquery行的开头：$('#row').css({'background-color':。这标识了我们可以清除的代码部分。有一种避免重复此语句的简单方法：

function flash(color){
    var count = 0;
    var interval = setInterval(function() {
        if (++count === 7) {
            window.clearInterval(interval);
        }
        else {
            var new_color = color;
            if (count % 2 == 0) {
                new_color = 'white';
            }
            $('#row').css({'background-color':new_color});
        }
    }, 1000);
}

在这里，您已经将两行jquery压缩为一行，并保留了一行作为对颜色的赋值，这是代码中此类的唯一行。再次扫描重复的零件，您会发现没有执行多次的操作。然后，您可以删除花括号，使用ES6语法，使用三元数将条件填充到一行或任何种类的首选项中，但这取决于解释是更简洁还是更简洁。在我看来，这只会降低可读性，您可以查看自己是否在重复自己，如果没有，那么您处在一段简洁的代码中。

Answer 3

使用CSS animations代替那样，将您实际的动画逻辑分离到样式代码（您的CSS）中，并且将应用动画的逻辑也模块化到它自己的位置：

function animationEndCallback(e) {
  e.target.classList.remove(e.animationName);
  e.target.removeEventListener("animationend", animationEndCallback);
}

function cleanAnimation(el, animation) {
  el.addEventListener("animationend", animationEndCallback);
  el.classList.add(animation);
}

const toBeFlashed = document.getElementById("el");
const btn = document.getElementById("flasher");

btn.addEventListener("click", () => {
  cleanAnimation(toBeFlashed, "flashy");
});

@keyframes flashy {
  from {
    background-color: transparent;
  }
  to {
    background-color: rgb(116, 195, 224);
  }
}

.flashy {
  animation: 1s flashy 4 alternate;
}

<div id="el">Hello</div>
<button id="flasher" type="button">Flash</button>