Question

我已经制作了一个删除按钮，该按钮会变形为确认按钮，实际上它需要您单击按钮两次才能调用删除方法。如果您只点击一次按钮，等待1秒钟，它就会回到默认状态。

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

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

额外的10毫秒延迟是因为我的鼠标有时随机认为单击是双击。 10毫秒的延迟意味着足够小，不允许由有缺陷的鼠标引起的意外双击，同时小到足以确保定期双击（除非使用点击超过每秒100次，这是不可能的）。 / p>

但是，如果用户单击一次并将鼠标放在按钮上，它仍会变形。我希望内部$ 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>

延长$ timeout

1 个答案: