我正在尝试制作一个按钮，在单击后立即执行操作。但是，如果鼠标在超时后仍处于按下状态，则只要按钮按下，就应重复该操作。
在下面的代码中，$interval工作正常。但不知何故，$timeout被忽略了，间隔立即开始。我做错了什么？
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>问题是双重的。第一种情况是，如果您在超时延迟完成之前向上鼠标，您设置的间隔承诺仍将未定义，因此当您调用 cancel 时，不会取消任何内容。第二个问题是，如果单击该按钮两次，您将丢失对第一个间隔承诺的所有引用。第二次单击(创建第二次超时(将在完成时替换第一个间隔承诺。实际上，您将有 2 个并发执行$intervals，其中一个您没有引用。
这是一个工作示例。
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>