如何添加一个延迟徘徊在angularjs的因素呢？ [英] How do I add a delay for hovering an element in angularjs?

问题描述

我有一个元素：

    <span ng-mouseenter="showIt()" ng-mouseleave="hideIt()">Hover Me</span>
    <div class="outerDiv" ng-show="hovering">
        <p>Some content</p>
        <div class="innerDiv">
            <p>More Content</p>
        </div>
    </div>

下面是JS：

// mouseenter event
$scope.showIt = function () {
    $scope.hovering = true;
};

// mouseleave event
$scope.hideIt = function () {
    $scope.hovering = false;
};

和我希望能够设置上悬停事件500ms的延迟。

And I want to be able to set a 500ms delay on the hover event.

我已经有一个回答这个问题，但我不能将它张贴了8小时。我会回来的！

I already had an answer to this question, but I can't post it for another 8 hours. I'll be back!

推荐答案

像大多数提到的已经在这里，我添加了一个计时器到MouseEnter事件。

Like what most have mentioned on here already, I added a timer to the mouseenter event.

// create the timer variable
var timer;

// mouseenter event
$scope.showIt = function () {
    timer = $timeout(function () {
        $scope.hovering = true;
    }, 500);
};

我的问题是，如果我过去滚动的项目和鼠标打它，还是会出现弹出半秒之后。我希望能够滚过项目没有弹出意外发生了。

The problem I had was that if I was scrolling past the item and the mouse cursor hit it, the popup would still occur half a second later. I want to be able to scroll past an item without the popup happening by accident.

把超时在一个变量让我取消暂停。这是我做一个鼠标离开事件，以确保用户不小心触发弹出。

Putting the timeout in a variable allowed me to cancel the timeout. Which I do on a mouse leave event to ensure users don't accidentally triggering the popup.

// mouseleave event
$scope.hideIt = function () {
    $timeout.cancel(timer);
    $scope.hovering = false;
};

下面是万一有人想看到它在行动提琴：
的jsfiddle

Here is a fiddle in case anyone wants to see it in action: jsfiddle

这篇关于如何添加一个延迟徘徊在angularjs的因素呢？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！