Установите длительность таймаута, равную времени, которое требуется для запуска процесса регистрации.

Question

Я пытаюсь сделать обратную ссылку для входа в систему за пределами экрана при входе пользователя в систему. Анимация зависит от оператора if, который проверяет текущий состояние аутентификации. Однако для того, чтобы этот оператор работал, я вынужден установить $timeout, чтобы запрос на вход был отправлен, а состояние аутентификации было изменено до выполнения оператора if.

Если запрос не занимает больше времени, чем 1000 ms (и это также минимальный минимум, который должен быть установлен), это работает нормально, но иногда это занимает больше времени. Поэтому мой вопрос: как я могу разрешить эту продолжительность изменять в зависимости от времени, которое потребовалось для запуска запроса? Я не хочу, например, устанавливать 3000 ms и ждать, если он не понадобится, если сам запрос взял 1000 ms.

Процесс регистрации выполняется с использованием Firebase, поэтому он должен отправить запрос в свой API, а затем отправить ответ, поэтому продолжительность очень несовместима.

Я запускаю эту анимацию из директивы, которая активируется через две отдельные кнопки; один для отображения фактической формы и один, чтобы подтвердить информацию о том, что пользователь вошел:

forumApp.directive('mySigninSlide', ['sharedInfo', '$timeout', 
    function(sharedInfo, $timeout) { 
     return { 
      restrict: 'A', 
      link: function($scope, element, attrs) { 

       /** 
       * Display/hide the login form via 
       * an animation depending on which 
       * button is clicked and the login state 
       */ 
       element.on('click', function() { 

        var sidebar = $('#signin-wrapper'); 

        if (element.attr('id') === 'confirm-login-btn') { 

         $timeout(function() { 

          if (sharedInfo.getAuthState()) { 

           sidebar.stop().animate({left: '-606px'}); 
           sharedInfo.setError(''); 
           $scope.isAnimated = true; 
          } 
         //1000 ms is the bare minimum time 
         //it takes for the login process 
         }, 1000); 
        } 
        else { 
         if ($scope.isAnimated === undefined || 
          $scope.isAnimated === false) { 

          sidebar.stop().animate({left: '340px'}); 
          $scope.isAnimated = true; 
         } 
         else { 
          sidebar.stop().animate({left: '-606px'}); 
          $scope.isAnimated = false; 
          sharedInfo.setError(''); 
         } 
        } 
       }); 
      } 
     }; 
}]); 

Answer 1

Одним из решений было бы быстро проверить Идент-состояния (вместо одного вызова $timeout) таким образом:

function checkState() { 
    maxChecks--; 
    if (sharedInfo.getAuthState()) { 
     sidebar.stop().animate({left: '-606px'}); 
     sharedInfo.setError(''); 
     $scope.isAnimated = true; 
    } else if (maxChecks) setTimeout(checkState, 100); 
}; 
var maxChecks = 30; 
setTimeout(checkState, 500); 

Что означает: подождать пол секунды, а затем проверить на auth-state каждый .1 секунд.

Мне приходилось делать это несколько раз, но мне это не нравится. Я предлагаю вам найти способ сделать это асинхронно - так, как это должно быть сделано.