Javascript 同时执行JS函数

我试图同时执行两个不同的函数

我有一排图像，一个接一个地，它们通过改变不透明度而变亮，使其看起来像是在眨眼。问题是，时间需要精确，而且只有几毫秒的差异，一两分钟后看起来就像一团糟

    <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>

setTimeout（函数blinkone（）{$（'.1'）.delay（1000）.fadeTo（0,0.5）.delay（2000）.fadeTo（0,1，blinkone）；}，1000）
setTimeout（函数blinktwo（）{$（'.2'）.delay（1000）.fadeTo（0,0.5）.delay（2000）.fadeTo（0,1，blinktwo）；}，2000）
setTimeout（函数blinkthree（）{$（'.3'）。delay（1000）。fadeTo（0,0.5）。delay（2000）。fadeTo（0,1，blinkthree）；}，3000）

---

如何在同一时间执行多个函数？

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);

---

通过这种方式，您可以避免丢失动画之间的同步。

只需将它们赋予相同的类并影响该类

$（函数（）{
offon（）；
});
函数offon（）
{
$（'.blink'）。设置动画（{opacity:0}，1000）
.animate（{opacity:1}，1000，function（）{
offon（）；
});
}

您还可以递归地链接回调，这在我看来要干净得多：

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幅图像中

下面是一个演示：

---

我不完全确定，但可能你想要的效果更像这样：

你应该

setTimeout

a

setInterval

调用。这是一个技术性问题，但由于JS是单线程的，你不能在完全相同的时间执行它们。你不能让它们在完全相同的时间执行，但是如果你在相同的超时或间隔内执行它们，你的问题就会消失。这会形成某种动画吗？你想在任何给定的时间打开两盏灯吗？类似于或一次只能使用一个？您可能希望使用彩色div，以便可以实际看到效果。我有图像占位符（chrome），但是的FF只是隐藏。我将添加alt标记和边框来显示它们，非常感谢！这是完美的工作，这正是我所需要的！（由于这可能会有20-30个图像，因此它的简单可扩展性非常棒。）

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