Question

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

启动图库滑块
启动响应式图像网格
根据网址

问题是页面在完成其他两个之前滚动到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函数，这确实有效。但我无法预测每个系统初始化插件需要多长时间。所以这可能不是理想的解决方案。

再次，对不起，如果这是非常基本的（可能是这样），但我需要尽快把它放到我的脑海里：）

Answer 1

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

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

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

Answer 2

试试这个

function startSliderAndGrid() {
var hashtag = window.location.hash;
$('.simpleslide').someOtherPlugin();
$('#home-slider').someSliderPlugin().parents('body').animate({scrollTop: $(hashtag).offset().top}, 500);
}

Answer 3

在研究了一下之后，我发现.promise()完全符合我的需要:) 在插件中，我只需添加一个

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

在等待多个动画完成之前，这是完美的。

Javascript - 确保在下一个脚本执行之前完成一个脚本

3 个答案: