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将设置为下一个元素。这是我的问题出现的地方。如果我首先将变量设置为回调函数中的下一个img，那么插件运行良好且一切都很顺利，但是如果我在每个图像上运行一次脚本之后在回调函数之外执行此操作，并且必须从第一个图像重新开始当它淡出时，我看到了背景。如果我在回调函数中将第一个图像设置为下一个图像，则不会发生这种情况。

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

Answer 1

您遇到由异步功能引起的行为。

jQuery动画函数如fadeTo异步执行，这意味着函数可以在调用后随时完成。如果按顺序调用两个异步函数，

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。

关于调用哪些函数的Javascript顺序

1 个答案: