使用 JavaScript 逐渐改变不透明度不起作用

Gradually changing opacity with JavaScript doesn't work

我有这个元素:

<div id="newDimention">
  <div class="newDimention">
  </div>
</div>  

我正在尝试通过 javascript:

更改其不透明度
let newDimention=document.getElementById('newDimention');
setTimeout(()=>{
 setDimention();
  newDimention.innerText="You've uncovered the third dimension."
   newDimention.style.color="purple";
    newDimention.style.fontSize='30px';
    newDimention.style.marginTop='30px';
    newDimention.style.opacity="0";
    })



const setDimention = () => {
for (var i = 0,b=14; i <= 500; i++) {
 setTimeout(()=>{
//document.getElementById("newDimention").style.opacity=String(Math.round(i/50)/10);
   newDimention.style.opacity=String(Math.round(i/50)/10);
 },i*b)
}
}

我尝试不转换为字符串,尝试通过 class、id 访问。 Devtools 清楚地表明 String(Math.round(i/50)/10) 每次都应该逐渐增加。但是每次 newDimention.style.opacity 仍然是 '0'

然后一旦 String(Math.round(i/50)/10)==='1'newDimention.style.opacity 立即变为 '1'。因此,由于某种原因它一直保持 '0',直到 i===500,然后突然变为 '1'。我没有任何其他函数来操纵这个元素。如果我删除 newDimention.style.opacity=String(Math.round(i/50)/10); 行,不透明度将保持在 '0',因此该行应该会更改该元素的不透明度。

为什么会这样?

在写这个问题时我意识到我在 for loop 中使用 var 而不是 let,所以当函数最终在 setTimeout 之后被触发时,他们使用i===500,最新值。将其更改为 let 修复了它:

const setDimention = () => {
for (let i = 0,b=14; i <= 500; i++) {
 setTimeout(()=>{
//document.getElementById("newDimention").style.opacity=String(Math.round(i/50)/10);
   newDimention.style.opacity=String(Math.round(i/50)/10);
 },i*b)
}
}

来自https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let

"let 允许您声明仅限于块语句或使用它的表达式的范围的变量,这与 var 关键字不同,后者全局定义变量,或局部定义变量整个函数不考虑块作用域。