javascript - 用于实现淡入的 for 循环中的 setInterval

Question

我已经通过更改不透明度值实现了以下淡入代码，到目前为止该值有效，但不确定为什么我们需要 curOpacity 将值保存在外部，

工作代码

for(let i=0;i<squares.length;i++) {
        var curOpacity = 0;

        (function(index){
            setInterval(function(){
                curOpacity += 0.1;
                squares[index].style.opacity = curOpacity;
            }, 200)
        })(i);
    }

我第一次没有使用 curOpacity 变量，它不起作用，你能告诉我原因和与之相关的主题吗？

不工作的代码，

for(let i=0;i<squares.length;i++) {
    (function(index){
        setInterval(function(){
            squares[index].style.opacity += 0.1;
        }, 200)
    })(i);
}

标签： javascript

Answer 1

squares[index].style.opacity 是一个字符串。在尝试对其进行数学运算之前将其转换为数字：

squares[index].style.opacity = +squares[index].style.opacity + 0.1;