Question

我一直在网上寻找答案，但我发现的一切似乎都失败了。

在一个函数中我想禁用一个href链接。一旦完成此功能（包括动画），我想重新启用该链接。

我目前有以下内容：

function prev() {
    $prevId = $('.active').prev('.slide-item').attr('id');
    if ($prevId) {
        $('#prev').bind('click', false);            
        var id = '#'+$prevId;
        $('#thumb-list li a.current').removeClass('current');
        var thumb = '#thumb-list li a'+id;
        $(thumb).addClass('current');
        $('.active').transition({ left: offCanvas }, 300, function() { $(this).hide(); }).removeClass('active');
        setTimeout(function() {
            $(id).addClass('active').css({ left: -pageWidth }).show().transition({ left: 0 }, 300).css("-webkit-transform", "translate3d(0px,0px,0px)"):
        }, 30); 
        prevFinished();
    } else {
        $('.active').css("-webkit-transform", "translate3d(0px,0px,0px)");
        id = '#'+$('.active').attr('id');
    }
    $prevId = $(id).prev('.slide-item').attr('id');
    $nextId = $(id).next('.slide-item').attr('id');
    prevNextCheck();
}

function prevFinished() {
    $('#prev').unbind('click', false);
}

但它根本不起作用。

如果有人能指出我正确的方向，那就太好了。

P.S我尝试使用回调，但除非我做的事情非常糟糕，否则每次都会失败。

Answer 1

如前面的答案中所述，您可以使用jQuery的Deferred和Promises。根据您何时希望执行您的功能，它看起来像这样：

var deferred = new $.Deferred();
var promise = deferred.promise();

$('.someClass').transition({ left: 0 }, 300, function(e) {
    // .. maybe do some other stuff or maybe not
    deferred.resolve();
});

promise.then(someFunction);

function someFunction() {
    // this runs after your transition has finished
}

如果您愿意，您当然可以将多个链接在一起。

此外，如果你有多个功能需要等待完成，你也可以使用$ .when并等待所有这些功能完成。

$.when(promise1,promise2).then(someFunction);

Answer 2

有几种方法可以实现这一目标。

解决方案之一是使用回调。您的动画序列看起来过于复杂，但看起来您正在为多个对象制作旋转动画，我不知道它的要求。但是，我可以说的一件事是你的回调只是从它的外观中封装了少量的功能。加宽它以包括预期在动画之后发生的每个动作。

解决方案二是使用延迟对象和promises。 I'm not the best person to ask有关其工作原理的实例，但功能符合您的要求。

这两个路径都是文档jquery功能，只需要正确放置。

仅在另一个功能完成后运行功能

2 个答案: