javascript 如何在 angularjs 中为悬停元素添加延迟？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24835774/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I add a delay for hovering an element in angularjs?
提问by Tj Gienger
I have an element:
我有一个元素：
<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>
Here is the JS:
这是JS：
// mouseenter event
$scope.showIt = function () {
$scope.hovering = true;
};
// mouseleave event
$scope.hideIt = function () {
$scope.hovering = false;
};
And I want to be able to set a 500ms delay on the hover event.
我希望能够在悬停事件上设置 500 毫秒的延迟。
I already had an answer to this question, but I can't post it for another 8 hours. I'll be back!
我已经有了这个问题的答案，但我不能再发布 8 小时。我会回来的！
回答by Tj Gienger
Like what most have mentioned on here already, I added a timer to the mouseenter event.
就像这里大多数人已经提到的那样，我向 mouseenter 事件添加了一个计时器。
// 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;
};
Here is a fiddle in case anyone wants to see it in action: jsfiddle
这是一个小提琴，以防有人想看到它的实际效果： jsfiddle
回答by pixelbits
I recommend using CSS transitions and angular-animate:
我建议使用 CSS 过渡和 angular-animate：
JS
JS
var app = angular.module('app', ['ngAnimate']);
CSS
CSS
.outerDiv.ng-hide-remove {
-webkit-transition: 0.5s linear all;
transition: 0.5s linear all;
transition-delay: 0.5s;
opacity: 0;
}
.outerDiv.ng-hide-remove.ng-hide-remove-active {
opacity: 1;
}
HTML
HTML
<span ng-mouseenter="hovering=true" ng-mouseleave="hovering=false">Hover Me</span>
<div class="outerDiv" ng-show="hovering">
<p>Some content</p>
<div class="innerDiv">
<p>More Content</p>
</div>
</div>
回答by Dmidify
Thank you for asking this question, as this example helped me understand how $timeout works much better than AngularJS's documentation did. However, I did improve the operation slightly on the correct answer and wanted to share it here.
感谢您提出这个问题，因为这个例子帮助我理解 $timeout 如何比 AngularJS 的文档更好地工作。但是，我确实在正确答案上稍微改进了操作，并想在这里分享。
You never have to create an empty var called timer. In fact, doing so is using up memory that you didn't have to. You have a variable and two functions to handle what is actually a single operation.
您永远不必创建一个名为 timer 的空变量。事实上，这样做会耗尽您不必使用的内存。您有一个变量和两个函数来处理实际上是单个操作的内容。
So, what I did was create a single function called 'toggleHover' that accepts a Boolean argument named 'bool'. Then an if/else statement determines which $timeout function you need to run.
所以，我所做的是创建一个名为“toggleHover”的函数，它接受一个名为“bool”的布尔参数。然后 if/else 语句确定您需要运行哪个 $timeout 函数。
AngularJS In Controller
AngularJS 在控制器中
$scope.hovering = false; //Sets the initial state of hover
$scope.toggleHover = function (bool) {
if (bool === true) {
$timeout(function () {
$scope.hovering = !$scope.hovering;
}, 500);
} else {
$timeout(function() {
$scope.hovering = !$scope.hovering;
}, 500);
};
}
HTML/VIEW
HTML/视图
<span ng-mouseenter="toggleHover(true)" ng-mouseleave="toggleHover(false)">Hover Me</span>
EXAMPLE
例子
回答by Rahil Wazir
window.setTimeoutCalls a function or executes a code snippet after a specified delay.
window.setTimeout在指定的延迟后调用函数或执行代码片段。
$scope.hideIt = function () {
window.setTimeout(function() {
$scope.hovering = false;
$scope.$apply();
}, 500); // 500ms delay
};
Or the Angular $timeoutservice:
或者 Angular$timeout服务：
$scope.hideIt = function () {
$timeout(function() {
$scope.hovering = false;
}, 500); // 500ms delay
};
回答by Shomz
Use $timeout:
使用$timeout：
$scope.showIt = function () {
$timeout(function(){
$scope.hovering = true;
}, 500);
};
Don't forget to add it as a dependency.
不要忘记将其添加为依赖项。
And if you wish to play with it some more, you can make your own directive like delayedMouseEnterthat would include the delay and use it instead.
如果你想多玩一些，你可以制定自己的指令，比如delayedMouseEnter包含延迟并使用它。
回答by Lars335
I wrote a simple directive for this.
我为此编写了一个简单的指令。
(function () {
'use strict';
angular
.module('app')
.directive('scHover', scHoverDirective);
function scHoverDirective($timeout) {
return {
link: function(scope, element, attrs, modelCtrl) {
var inTimeout = false;
var hoverDelay = parseInt(attrs.scHoverDelay, 10) | 1000;
element.on('mouseover', function () {
inTimeout = true;
$timeout(function () {
if (inTimeout) {
scope.$eval(attrs.scHover);
inTimeout = false;
}
}, hoverDelay);
});
element.on('mouseleave', function () {
inTimeout = false;
scope.$apply(function () {
scope.$eval(attrs.scHoverEnd);
});
});
}
}
}
})();
Example usage (sc-hover-delay is optional):
示例用法（sc-hover-delay 是可选的）：
<div sc-hover='vm.title="Hovered..."' sc-hover-end='vm.title=""' sc-hover-delay="800">Hover me! {{ vm.title }}</div>
Here is a plunker: http://plnkr.co/edit/iuv604Mk0ii8yklpp6yR?p=preview
这是一个plunker：http://plnkr.co/edit/iuv604Mk0ii8yklpp6yR?p=preview
回答by yonia
Hi there Great answer above Just wanted to add don't forget to cancel your timer if needed when you hover out and it still didnt fire or when you destroy the directive
嗨，上面很好的答案只是想添加不要忘记在您悬停时如果需要取消您的计时器但它仍然没有触发或当您破坏指令时
$timeout.cancel( timer );
$scope.$on("$destroy",
function( event ) {
$timeout.cancel( timer );
}
);
