使用jQuery按顺序执行动作答案

【问题标题】：Using jQuery to perform actions in sequence使用jQuery按顺序执行动作
【发布时间】：2013-01-24 07:00:46
【问题描述】：

我在我的页面上使用fullscreenr jQuery 插件。首先，我隐藏图像，然后使用 waitforimage 插件对其运行 fullscreenr，最后使用 fadeIn 显示它：

<img id="bgimg" style="display: none;" src="<?php bloginfo('template_url')?>/images/backgrounds/<?php echo $imageData['location']; ?>" />

<script type="text/javascript">
    $bg = $('#bgimg');
    $bg.hide();
    var FullscreenrOptions = {  width: <?php echo $imageData['width']; ?>, height: <?php echo $imageData['height']; ?>, bgID: '#bgimg' };
    $bg.waitForImages(jQuery.fn.fullscreenr(FullscreenrOptions));
    $bg.fadeIn(2500);
</script>

我的问题是，有些东西不太正常。这在我的开发盒上运行良好，但是当我尝试在网络上加载页面时，fadeIn 在图像完全加载之前开始。

我尝试向 fullscreenr 函数添加回调，但结果相同。我能做些什么来确保它正常工作？我还尝试使用 $bg.load() 来加载 fullscreenr，但没有成功。

谢谢！

【问题讨论】：

您能否发布您使用的load() 代码。这似乎是最好的解决方案，所以我不确定为什么它不适合你。

标签： jquery fullscreen sequencing waitforimages

【解决方案1】：

当您有像function2(function1(whatever)) 这样的嵌套函数调用时，将首先执行内部函数，然后执行外部函数。因此，在您的情况下，将在 waitForImages 之前应用 fullscreenr() 调用......这将解释这种行为。

第二眼我猜这就是你想要做的

$bg.waitForImages(function() {jQuery.fn.fullscreenr(FullscreenrOptions)});

【讨论】：

所以我是 waitForImage 的 fullscreenr 函数的返回值，而不是传递图像加载后调用的函数？如果我使用 load() 函数会不会一样？
*“我路过”...等我回家后试试这个
您尝试过我建议的代码吗？它应该将匿名函数作为回调返回到 waitForImages 而不是立即调用 fullscreenr
好的，所以我尝试了您的建议，但没有成功，但后来我将其更改为 load() 而不是 waitForImages，它确实有效。传递 function(){blah()} 和只是 blah() 有什么区别？ JS/jQuery怎么知道一个是对函数的引用，一个是函数调用？
如果你有 var whatever = function() {anotherFunction();} 你将一个函数（又名函数引用）传递给变量。只要你调用这个函数，anotherFunction()就会被执行。 () 括号触发函数的立即执行。所以var whatever = anotherFunction() 会立即执行函数并将结果（即返回值）赋给变量whatever。