同时执行 JS 函数

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/