如何减慢 JavaScript 中 for 循环的执行速度？

Question

我正在制作一个基本的图像滑块（按 next/prev 按钮，图片会发生变化）。我也在尝试实现一个非常简单的淡入淡出效果；为此，我有一个 for 循环，它会更改图像的 class，循环通过 classes 来更改不透明度。代码运行良好，可以完成我想要它做的事情，但是 for 循环执行得如此之快，以至于您没有注意到不透明度的变化。我到处查看，到处有人提到 setTimeout，但这只会导致函数延迟启动。我只是想放慢我的 for 循环，以便您可以直观地注意到每次迭代。

function nextphoto(){

    for(var x = 0; x < 5; x++){
        photo.className = fade[x];
    }

    i++;
    if(i>19){
    i=0;
    }

    photo.src = image[i];

    for(var y = 4; y >= 0; y--){
        photo.className = fade[y];
    }
}

Answer 1

您可能误解了同步代码执行的概念。您的所有代码都必须完成运行ning，然后才能更新任何内容或 "rendered" 显示在屏幕上。所以你的 for 循环将运行直到它完成，然后屏幕将更新，但它当然只会渲染图像的最终视图。

您应该通过 javascript 向元素动态添加 class 来触发 CSS 转换，或者如果您迫不及待地想在代码中完成这一切，可以使用一些不使用 CSS 的原因，并且不想编写自定义的每帧动画系统，或使用库，然后在 for 循环的每次迭代中，触发一个异步函数，该函数将在以后更新, 在当前同步 for 循环代码之外。

即：

var aThing;
for(var i = 0; i < someNumber; i++){
  setTimeout(function(){
    aThing.someValue = aThing.someValue * .9;
  }, 500 * i);
}

Answer 2

您应该考虑使用 JQuery 的 animate() 函数来设置不透明度等 css 值的动画。更好的是你可以使用 CSS 动画。

您正在做的并不是实现目标的好方法。如果你真的想要那样，你应该使用 setInterval 或 setTimeout。

如何减慢 JavaScript 中 for 循环的执行速度？

How do you slow down the execution of a for loop in JavaScript?

javascript

for-loop

timedelay