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

Question

我正在制作一个基本的图像 slider (按下一个/上一个按钮，图片会发生变化)。我还尝试实现一个非常简单的淡入淡出效果；为此，我有一个 for 循环来更改图像的类，循环更改不透明度的类。该代码运行良好并且执行了我想要的操作，但是 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

您可能误解了同步代码执行的概念。所有代码都必须先完成运行，然后才能更新或“渲染”到屏幕上。因此，您的 for 循环将运行直到完成，然后屏幕将更新，但它当然只会渲染图像的最终 View 。

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

即:

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