setInterval in for循环，用于实现淡入

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

Answer 1

squares[index].style.opacity is a string。在尝试对其进行数学运算之前，将其转换为数字：

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