扩展$timeout

Question

我已经做了一个delete按钮，它变成了确认按钮，实际上它要求您点击该按钮两次才能调用delete方法。如果您只单击该按钮一次，并且等待1秒，它将返回到默认状态。

我使用$timeout指令完成了这项工作，如下所示：

$timeout(function () {
    $timeout(setDefaults, scope.options.timeout);
}, 10);

额外的10毫秒的延迟是因为我的鼠标有时随机地认为一次点击就是双击。这10毫秒的延迟应该足够小，不允许有故障的老鼠造成意外的双击，同时也要足够小，以确保有规律的双击(除非用户每秒点击超过100次，这是不可能的)。

然而，如果用户点击一次，并保持他们的鼠标在按钮上，它仍然会变回。当用户在我的按钮上悬停时，我希望内部$timeout函数暂停。

我在指令中找不到任何暂停$timeout的内置方式。我是不是遗漏了什么？对工作有什么建议吗？

更新

我使用了以下代码来解决问题：

scope.cancelCountdown = cancelCountdown;
scope.startCountdown = startCountdown;

function cancelCountdown() {
    $timeout.cancel(scope.timer);
}

function startCountdown() {
    $timeout(function () {
        scope.timer = $timeout(setDefaults, 1000);
    }, 10);
}

然后将方法绑定到鼠标输入和鼠标离开。

<button id="confirm-button-{{id}}" 
    data-ng-click="action()"
    data-ng-mouseenter="cancelCountdown()"
    data-ng-mouseleave="startCountdown()">
</button>

这不是我所希望的，但它工作得很好！

Answer 1

你试过使用ngMouseenter和ngMouseleave吗？您可以在鼠标结束时增加超时时间，并在离开按钮时返回1秒：

主计长：

$scope.onMouseenter = function(){
    scope.options.timeout = 100000; // 100 seconds
};

$scope.onMouseleave = function(){
    scope.options.timeout = 1000; // 1 second
};

查看：

<button .... ng-mouseenter="onMouseenter()" ng-mouseleave="onMouseleave()">

</button>