Extend a $timeout

Question

我制作了一个delete按钮，它可以变形为confirm按钮，实际上它需要您单击该按钮两次才能调用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>