javascript - 动画时阻止链接切换

Question

我的代码有一个小问题，但找不到解决方案。在我的页面中，有一个带有链接的顶栏(主页、关于、注册)，每个链接都有自己的内容。假设用户当前正在查看“主页”内容，然后单击“关于”，页面应该隐藏“主页”内容，然后显示“关于”内容。

但是我注意到，如果在有内容动画的情况下单击另一个链接，则会出现错误，因此我创建了一个名为 AllowLinkSwitch 的变量，以阻止用户切换到另一个链接(如果仍然存在动画)动画正在进行中。

this.ContentHideThenShow = function(contentHide, contentShow, contentShowHeight) 
{
    this.AllowLinkSwitch = false;
    $(contentHide).animate({
        height: "0px"
    }, 300, function(){
        $(contentHide).hide();
        $(contentShow).show();
        $(contentShow).animate({
            height: contentShowHeight
        }, 300, function(){ this.AllowLinkSwitch = true; });
    });
}

首先，我在调用函数时将 AllowLinkSwitch 设置为 false，然后在动画结束时将其设置为 true，但变量是永远不会设置回 true 并且我无法切换到其他链接，只有当我将 this.AllowLinkSwitch = true; 行放在 animate 函数之外时，上述代码才有效，但我不希望它像那样工作，因为该错误仍然发生，我需要在动画结束后将该变量设置为 true，有人可以帮忙吗？

Answer 1

在 animate() 回调中，this 不会是对外部对象的相同引用。您需要将引用存储在该函数之外。试试这个:

this.ContentHideThenShow = function(contentHide, contentShow, contentShowHeight) {
    var _this = this; // store reference here
    _this.AllowLinkSwitch = false;
    $(contentHide).animate({
        height: "0px"
    }, 300, function() {
        $(contentHide).hide();
        $(contentShow).show().animate({
            height: contentShowHeight
        }, 300, function(){ 
            _this.AllowLinkSwitch = true;  // use here
        });
    });
}

或者，您可以通过使用 if (!$(contentShow).is(':animated')) 检查元素当前是否处于动画状态，从而完全避免使用动画状态标志防止逻辑在代码中需要的地方出现。