Question

我有一个用户界面，可以在点击时放大和缩小一个框。它是动画的，当框关闭时，应该运行另一个动画。两个事件都使用相同的功能和一些条件处理。

错误是当盒子打开时，我点击它，然后在缩小动画完成之前再次单击它，然后被缩放回来但是只有当它被缩小时应该运行的动画，触发了。

正确行为：http://cl.ly/2M0a3T3e2V0g
双击错误行为：http://cl.ly/2l0E3x3L0h19

如何确保缩小完成后才能触发缩小后动画？这是代码（它是有角度的，但在这里并不重要......）：

animating = false; // I tried to use a flag, but it did not work

scope.toggleContextSlider = function() { // The click function
  if (scope.sliderClosed) { // The "avatar" is the "box"
    openSlider(scope.animtionDuration, scope.hearingContextAvatar); // The "avatar" is the "box"
  } else {
    closeSlider(scope.animtionDuration, scope.hearingContextAvatar);
  }
  scope.sliderClosed = !scope.sliderClosed;
}

动画功能：

function openSlider(animtionDuration, hearingContextAvatar) {
  // Animating stuff

  if (hearingContextAvatar && !animating) {
    closeStuff(animtionDuration, hearingContextAvatar)
  }
}

function closeSlider(animtionDuration, hearingContextAvatar) {
  // Animating stuff

  if (hearingContextAvatar && !animating) {
    openStuff(animtionDuration, hearingContextAvatar)
  }
}

function openStuff(animtionDuration, currentAvatar) { // This is the functions that is triggered with the double click
  animating = true;
  setTimeout(function(){
    // Animating stuff
    animating = false;
  }, animtionDuration);
}

function closeStuff(animtionDuration, currentAvatar) {
  animating = true;
  currentAvatar.removeClass('open')
  setTimeout(function(){
    // Animating stuff
    animating = false;
  }, animtionDuration);
}

Answer 1

好的，在这里你要根据另一个事件触发一些事件。为此，您可以将承诺与 $ q 一起使用。

您将能够使用承诺权力，并通过解决您的承诺轻松处理您的活动。

这个想法是使用两个标志，例如，它会告诉我们滑块是否打开。

我创建了一些动画功能来向您展示如何处理它。在这里，我使用for loop和$timeout函数来模拟事件。

<强>控制器

(function(){

function Controller($scope, $q, $timeout) {

  $scope.slide = true;

  var closeResolved = true;

  var openResolved = false;

  $scope.show = false;

  $scope.processing = [];

  $scope.closing = [];

  $scope.toggle = function() {
    if ($scope.slide && closeResolved){
      event('open processing').then(function(data){
        $scope.show = data;
        //openResolved set to true
        openResolved = data;
        //closeResolved set to false
        closeResolved = !data;
      });

      $scope.slide = !$scope.slide;

    } else if (!$scope.slide && openResolved) {
      event('close processing').then(function(data){
        $scope.show = !data;
        //closeResolved set to true
        closeResolved = data;
        //openResolved set to false
        openResolved = !data;
      });

      $scope.slide = !$scope.slide;
    }

  }

  function event(processing){
    //Return promise, and resolve when loop is over
    return $q(function(resolve){
      for (var i = 0; i < 3; ++i){
        (function(i){
          $timeout(function(){
            //Update info processing array
            $scope.processing.push(processing);
            if (i == 2)
              resolve(true);
          }, 500 * i);
        })(i);
      }
    });
  }


}

angular
.module('app', [])
.controller('ctrl', Controller);

})();

<强> HTML

  <body ng-app="app" ng-controller="ctrl">

    <button type="button" name="button" ng-click='toggle()'>Toggle</button>

    <h3 ng-if="show" style="color:green">OPEN</h3>
    <h3 ng-if="!show" style="color:red">CLOSE</h3>

    <ul>
      <li ng-repeat="item in processing track by $index">{{item}}</li>
    </ul>

 </body>

通过此示例，您可以看到，如果您向toogle按钮发送垃圾邮件，则不会引发多个事件。如果您在公开活动期间开始关闭活动，则会等到事件打开完成。

您可以看到Working Plunker

如何在一定时间内（动画制作时）防止触发功能？

1 个答案: