Objectives:
- Trigger a popover after hovering over a tag for 2 seconds
- Close any open popovers when leaving a tag
- No display should occur if a tag is left before 2 seconds
Main Issue: http://plnkr.co/edit/PDcLQNudx53Dag49FyCw?p=preview
Failed Attempted Solution: http://plnkr.co/edit/39FGMocKB5GtQWnI1TFw?p=preview
The goal is to have a delayed popover div show up after hovering over a tag div for 2 seconds.
In the provided plnkr example, a setTimeout function with a delay of 1.5 seconds is utilized to achieve the desired effect.
However, an issue arises when quickly mousing over multiple tags in succession, causing all the setTimeout functions to trigger and resulting in multiple stuck popovers being displayed.
$scope.showTagDetails = function(t) {
function showDetails() {
t.showDetails = true;
}
$timeout(showDetails, 1500);
}
$scope.leaveTag = function(t) {
t.showDetails = false;
}
The objective is to prevent this issue, ensuring that no action takes place if the user swiftly scrolls over tags. A popover should only appear if the user lingers on a tag for a couple of seconds.
Suggested Resolution:
A unique function is required for each item, but implementation is currently halted:
HTML Markup:
<li ng-repeat="t in tags">
<div class="tag"
ng-mouseover="showTagDetails(t)"
ng-mouseleave="leaveTag(t)"
ng-click="sendTag(t)">{{t.name}}</div>
<tag-details tag="t"></tag-details>
</li>
Controller Logic:
var hoverTimer;
function callHoverTimer() {
console.log('callHoverTimer');
setTimeout(function() {
console.log('true');
return true;
}, 2000);
}
$scope.showTagDetails = function(t) {
// function showDetails() {
// t.showDetails = true;
// }
t.showDetails = callHoverTimer();
console.log(t.showDetails);
setTimeout(function() {
console.log(t.showDetails);
}, 2000);
// $timeout(showDetails, 1500);
}
$scope.leaveTag = function(t) {
t.showDetails = false;
}
Included is the faulty production code snippet as well: The existing functionality works once, displaying tagHover after hovering and staying on a tag for 2 seconds, but fails upon subsequent interactions:
var hoverTimer;
function callHoverTimer(ticker, tag) {
hoverTimer = setTimeout(function() {
TagDetailsFactory.saveTagDetails(ticker, tag);
}, 2000);
};
function hoverTag(tag) {
var thisTicker = '';
thisTicker = vs.ticker;
callHoverTimer(thisTicker, tag);
};
function leaveTag(tag) {
tagsHover = ScopeFactory.getScope('tagsHover');
tagsHover.leavingTag(tag);
clearTimeout(hoverTimer);
callHoverTimer = function(){}; // <- I can 'break' the function here, but then it's broken forever :(
};