Question

我正在制作一个基本图像滑块（按下一个/上一个按钮，图片也会改变）。我也试图实现一个非常简单的淡入淡出效果;要做到这一点，我有一个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循环将一直运行直到它完成，然后屏幕将更新，但它当然只有要渲染的图像的最终视图。

你应该触发一个CSS变换，通过javascript动态地向元素添加一个类，或者如果你不顾一切地在代码中执行它，有一些理由不使用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循环的执行速度？

2 个答案: