0

我有一个网页，其中有一些执行以下操作的 javascript：

  • 启动画廊滑块
  • 启动响应式图像网格
  • 根据 URL 中的标签滚动到特定的 div

问题是页面在其他两个完成之前滚动到 DIV，导致我事先不可能知道的偏移量。所以我需要确保前两个脚本已经完成并且所有动画都完成了，然后再滚动到 ID。

我研究了回调，并做了很多谷歌搜索。但我不确定我是否全部理解。所以我需要一个实际的工作示例。我尝试将脚本分成几个函数，就像我通常在 vbscript 中那样。但我只是在学习 javascript，我认为这是我在继续之前真正需要了解的东西。

基本上这就是我想要完成的：

$(function () {
    jQuery(document).ready(function () {
        startSliderAndGrid();
    });
});

function startSliderAndGrid() {
    //initialize slider
    $('#home-slider').someSliderPlugin();
    $('.simpleslide').someOtherPlugin();
    scrollToID();

}

function scrollToID() {
    if (window.location.hash) {
        var hashtag = window.location.hash;
        $('body').animate({
            scrollTop: $(hashtag).offset().top
        }, 500);
    }
}

所以在 document.ready 上，我想启动第一个函数，初始化插件，然后继续滚动到 ID。不过，我尝试过使用 timeOut 函数，这确实有效。但我无法预测每个系统初始化插件需要多长时间。所以这可能不是理想的解决方案。

再一次，对不起，如果这真的很基本（可能是），但我需要尽快把它放在我的脑海里:)

4

3 回答 3

1

也许你应该写一个拦截器之类的东西：

var pluginName=jQuery.fn.Plugin;
jQuery.fn.Plugin=function(param1, param2){
     //throw custom Event
    return pluginName.call(this, param1, param2);
}

在您的自定义事件被抛出后，继续下一个插件。

于 2013-08-29T09:06:31.493 回答
0

尝试这个

function startSliderAndGrid() {
var hashtag = window.location.hash;
$('.simpleslide').someOtherPlugin();
$('#home-slider').someSliderPlugin().parents('body').animate({scrollTop: $(hashtag).offset().top}, 500);
}
于 2013-08-29T09:02:46.757 回答
0

在研究了更多之后，我发现.promise()非常适合我的需要:) 在插件中，我只是添加了一个

$('.object').promise().done(function() {
   // do other stuff
   myFunction();
});

在执行其他操作之前等待多个动画完成时，这是完美的。

于 2013-09-02T10:50:26.107 回答