调用函数的 Javascript 顺序

Question

您好，我对编程还是很陌生，我还没有机会完全理解 Java 或 Javascript，这是我所知道的唯一编程语言，但我非常努力地理解 Javascript。

我面临的是，有时我不明白 javascript 何时调用我创建的函数。我为 jQuery 创建了一个小插件:http://jsfiddle.net/a9gjK/1/

该插件非常简单，图像使用绝对位置设置在彼此之上。然后我拍摄第一张图像并将 z-index 设置为 100 然后我拍摄下一张图像并将它的 z-index 设置为 50 然后我再次拍摄第一张图像并将其淡化为 0 不透明度，然后我调用回调函数女巫将第一张图片的 z-index 设置为 0 并将其淡化为 1 不透明度，将下一张图片的 z-index 设置为 100。

完成这个孔过程后，变量 first 被设置为下一个元素。这就是我的问题出现的地方。如果我将变量 first 设置为回调函数内的下一个 img 插件工作正常并且一切都很好，但是如果我在脚本对每个图像运行一次并且必须从第一张图像重新开始后在回调函数之外执行此操作当它淡出时，我看到了背景。如果我在回调函数中将第一张图片设置为下一张，则不会发生这种情况。

任何人都可以解释为什么会发生这种情况以及这与什么主题相关，以便我可以更好地阅读和理解正在发生的事情。

Answer 1

您正在遇到由异步函数引起的行为。

像 fadeTo 这样的 jQuery 动画函数是异步执行的，这意味着该函数可以在您调用它之后随时完成。如果依次调用两个异步函数，

asynch1();
asynch2();

代码的行为可能会有所不同，因为无法保证 asynch1 会在 asynch2 之前执行。

这就是回调的用途。您可以传递一个函数，该函数将在异步函数完成后运行。

当你这样做的时候，

$first.css({
    'z-index': 0
}).fadeTo(50, 1);
$next.css({
    'z-index': 100
});
$first = $next;

没有办法预测会先发生什么。

如果你改用回调

$first.css({
  'z-index': 0
}).fadeTo(50, 1, function() {
  $next.css({
    'z-index': 100
  });
  $first = $next;
});

您知道 $next CSS 将在淡入淡出动画完成后设置。