Question

我正试图在完全同时执行两个不同的功能。

我有一排图像，一个接一个地通过改变它们的不透明度点亮，使它看起来像是在闪烁。问题是时间需要准确，并且只需几毫秒的差异，一两分钟之后它就会变得一团糟。

    <img src="img1" class="1" /><img src="img2" class="2" /><img src="img3" class="3" />

    <script type="javascript">
    setTimeout(function blinkone(){$('.1').delay(1000).fadeTo(0,0.5).delay(2000).fadeTo(0,1, blinkone);},1000)

    setTimeout(function blinktwo() {$('.2').delay(1000).fadeTo(0,0.5).delay(2000).fadeTo(0,1, blinktwo);},2000)

    setTimeout(function blinkthree() {$('.3').delay(1000).fadeTo(0,0.5).delay(2000).fadeTo(0,1, blinkthree);},3000)
    </script>

如何在同一时间执行多个功能？

Answer 1

Javascript是单线程的，所以你不能在同一时间执行很多函数。您可以通过对setTimeout调用进行分组来解决此问题，例如：

var iterationCount = 0;
setTimeout(function(){
   iterationCount++;
   $('.1').delay(1000).fadeTo(0,0.5).delay(2000).fadeTo(0,1, blinkone);
   if (iterationCount % 2 == 0) {
      $('.2').delay(1000).fadeTo(0,0.5).delay(2000).fadeTo(0,1, blinktwo);
   }
   if (iterationCount % 3 == 0) {
      $('.3').delay(1000).fadeTo(0,0.5).delay(2000).fadeTo(0,1, blinkthree);
   }
},1000);

这样，您可以避免丢失动画之间的同步。

Answer 2

只要给他们所有相同的课程并影响该课程。 http://jsfiddle.net/popnoodles/amD8T/2/

<img src="img1" class="blink" />
<img src="img2" class="blink" />
<img src="img3" class="blink" />

<script>
$(function(){

    offon();

});

function offon()
{
    $('.blink').animate({opacity:0},1000)
        .animate({opacity:1},1000, function(){
            offon();
        });
}
</script>

Answer 3

你也可以递归链接回调，这是一个更清洁的IMO：

function display(number){
    number = number || 1
    $('.'+ (number % 3 + 1)).delay(1000).fadeTo(0,0.5).delay(2000).fadeTo(0,1, function(){display(++number);});
}

这也可以很好地扩展，因此您无需添加100行代码即可将效果添加到100张图像中。

以下是演示：http://jsfiddle.net/8cwA6/1/

我不完全确定，但也许你想要的效果更像是这个小提琴：http://jsfiddle.net/8cwA6/2/

在同一时间执行JS函数

3 个答案: