Переключение блокировки канала во время анимации

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; вне функции анимации, но я не хочу, чтобы она работала так, потому что эта ошибка все еще происходит, мне нужна эта переменная, которая должна быть установлена ​​в 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')), чтобы проверить, если элемент в настоящее время анимации и предотвратить логику возникновения, где это необходимо в вашем коде.

Answer 2

Ваш this.AllowLinkSwitch переменная IS установлена ​​на true, но только в области функций вы должны использовать глобальную переменную.