用于实现淡入的 for 循环中的 setInterval答案

【问题标题】：setInterval in for loop for implementing fade in用于实现淡入的 for 循环中的 setInterval
【发布时间】：2019-04-26 22:53:47
【问题描述】：

我已经通过更改不透明度值实现了以下淡入代码，到目前为止它正在工作，但不确定为什么我们需要 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);
}

【问题讨论】：

setTimeout with Loop in JavaScript的可能重复
在 Stack Overflow 上有很多关于 JavaScript 中 for 循环和 setTimeout 的问题。您尝试过哪些方法，为什么它们不起作用，是什么让您的特定问题与众不同？

标签： javascript

【解决方案1】：

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

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

【讨论】：