Объедините $ timeout и $ interval в AngularJS - PullRequest
Новая
       0

Объедините $ timeout и $ interval в AngularJS

0 голосов
/ 29 августа 2018

Я пытаюсь создать кнопку, которая выполняет действие сразу после нажатия. Но если мышь все еще не работает после истечения времени ожидания, действие следует повторять до тех пор, пока кнопка не нажата.

В следующем коде $ интервал работает. Но каким-то образом время ожидания $ игнорируется, и интервал начинается немедленно. Что я делаю не так? 

angular
  .module('myApp', [])
  .controller('myController', ($scope, $timeout, $interval) => {
    var interval;
    var timeout;
    let main = $scope;
    main.times = 0;
    let promise;
    let doSomethingOneTime = () => {
      $scope.times++;
    };

    let doSomethingInfinitely = function() {
      promise = $interval(function() {
        doSomethingOneTime();
      }, 100)
    };
    main.mouseDown = function(action) {
      doSomethingOneTime();

      $timeout(doSomethingInfinitely, 5000);
    };


    main.mouseUp = function() {
      $interval.cancel(promise);
    };


  });
<!DOCTYPE html>
<html ng-app='myApp'>

<head>
  <script data-require="angular.js@4.0.0" data-semver="4.0.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js"></script>
  <script data-require="angular.js@4.0.0" data-semver="4.0.0" src="script.ts"></script>
  <script data-require="angular.js@4.0.0" data-semver="4.0.0" src="system.config.js"></script>
  <script data-require="angular.js@4.0.0" data-semver="4.0.0" src="tsconfig.json"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-controller='myController'>
  <button ng-mousedown="mouseDown()" ng-mouseup="mouseUp()">Mouse Down</button>
  <br>
  <span>Doing something {{times}} times</span>
</body>

</html>

1 Ответ

0 голосов
/ 29 августа 2018

Проблема в два раза. Первый случай: если вы наведите курсор мыши до того, как истечет время ожидания, заданное вами интервальное обещание все равно останется неопределенным, поэтому при вызове отмены ничего не отменяется. Вторая проблема - если вы дважды нажмете кнопку, вы потеряете все ссылки на первое интервальное обещание. Второй щелчок, который создает второй тайм-аут, заменит первое интервальное обещание, когда он закончится. В действительности у вас будет 2 $ интервалов, выполняющихся одновременно, один из которых у вас нет ссылки.

Вот рабочий пример. 

angular
  .module('myApp', [])
  .controller('myController', ($scope, $timeout, $interval) => {
    var interval;
    var timeout;
    $scope.times = 0;
    $scope.mouseUp = function(){
      $timeout.cancel(timeout);
      $interval.cancel(interval);
    };
    let increment = ()=>{
      $scope.times++;
    };
    $scope.mouseDown = function(){
      increment();
      timeout = $timeout(()=>{
        interval = $interval(()=>{
          increment();
        },100)
      }, 1000)
      
    };

  });
<!DOCTYPE html>
<html ng-app='myApp'>

<head>
  <script data-require="angular.js@4.0.0" data-semver="4.0.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js"></script>
  <script data-require="angular.js@4.0.0" data-semver="4.0.0" src="script.ts"></script>
  <script data-require="angular.js@4.0.0" data-semver="4.0.0" src="system.config.js"></script>
  <script data-require="angular.js@4.0.0" data-semver="4.0.0" src="tsconfig.json"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-controller='myController'>
  <button ng-mousedown="mouseDown()" ng-mouseup="mouseUp()">Mouse Down</button>
  <br>
  <span>Doing something {{times}} times</span>
</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...