javascript - 使用 setTimeout 颜色淡入淡出

Question

长话短说，为什么这行不通？它似乎只运行一次 setTimeout 行，但不会重复。它应该每 500 毫秒将目标元素背景颜色的 alpha 降低 0.1，直到它达到零，但根据我的估计，它只会在函数停止之前达到 0.9 ...这非常简单，但我在这里找不到任何信息或其他解决类似问题的地方。

编辑:感谢您的回答，让它与 setInterval 一起工作。 CSS 无疑提供了一个更优雅的解决方案，但我应该提到这是针对我们应该使用 javascript 的作业。

function highlight(which){
    var target=document.getElementById(which);
    var a_value=1.0;
    if(a_value<0){
      return;
    }
    target.style.backgroundColor="rgba(255,255,0,"+a_value+")";
    setTimeout(function(){target.style.backgroundColor="rgba(255,255,0,"+(a_value -= 0.1)+")";}, 500);
  }

Answer 1

setTimeout 只触发一次。如果您希望某些内容在一定时间间隔内重复，那么您应该改为调用 setInterval。但是，您应该记得在动画结束时取消此重复计时器。

当您调用 setInterval 时，它会返回一个数字，该数字本质上是您的计时器的句柄。然后，您可以稍后通过将此数字传递给 clearInterval() 来取消计时器。

这是一个修改后的函数:

function highlight(which)
{
    var target = document.getElementById(which);
    var a_value = 1.0;

    target.style.backgroundColor = "rgba(255,255,0," + a_value + ")";

    let handle = setInterval(function ()
    {
        if (a_value < 0)
        {
            clearInterval(handle);
            return;
        }

        target.style.backgroundColor = "rgba(255,255,0," + (a_value -= 0.1) + ")";
    }, 500);
}

但是，关于这个问题的评论是正确的，指出用 JavaScript 制作这种类型的动画已经没有意义了。你应该看看CSS transitions .