javascript - 如何在 angularjs 中为悬停元素添加延迟？

Question

我有一个元素:

    <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;
};

我希望能够为悬停事件设置 500 毫秒的延迟。

我已经有了这个问题的答案，但我不能再过 8 个小时再发布它。我会回来的!

Answer 1

就像大多数人已经在这里提到的那样，我向 mouseenter 事件添加了一个计时器。

// create the timer variable
var timer;

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

我遇到的问题是，如果我滚动经过该项目并且鼠标光标击中它，弹出窗口仍会在半秒后出现。我希望能够滚动浏览某个项目而不会意外弹出。

将超时放在变量中允许我取消超时。我在鼠标离开事件上执行此操作以确保用户不会意外触发弹出窗口。

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

这里有一个 fiddle ，以防有人想看它的实际效果: jsfiddle