Skip to content

The plugin does not respect the enterTimeout value #1

Closed
LaurentGoderre opened this Issue Sep 29, 2011 · 4 comments

3 participants

@LaurentGoderre

Hi Nicolas,

I discovered that the plugin only respect the maxSpeed but not the enterTimeout value.

I fixed this by modifying the checkSpeed method. Instead of calling the triggerMouseEnter I call a clearTimeout:

window.clearInterval(checkSpeedInterval)

By doing this, the interval is cleared when the mouse slows down enough and then the timeout with a delay of enterTimeout is triggered from hoverHandler.

Here is the final code forn the checkSpeed method:

function checkSpeed() {
if (prv.X !== undef && prv.Y !== undef) {
var speed = (Math.sqrt(Math.pow(prv.X - cur.X, 2) + Math.pow(prv.Y - cur.Y, 2)) / options.checkSpeedInterval) * 1000;
if (speed <= options.maxSpeed) {
window.clearInterval(checkSpeedInterval)
}
}
prv.X = cur.X;
prv.Y = cur.Y;
}

@LeMisterV
Owner

HI Laurent,

In the original function, I called "triggerMouseEnter".
instead, you call "window.clearInterval(checkSpeedInterval)"

You can see that the first action done in "triggerMouseEnter" is to call "stopEnterEngine" (line 74).
The first action of "stopEnterEngine" is "window.clearInterval(checkSpeedInterval)" (line 59).

So the script was already clearing the "checkSpeedInterval" interval. But it was also doing some other actions.

The enterTimeout is managed in another place. You can see, in "hoverHandler" on line 124, the "timeoutEnter" timer is started.
This timer will trigger the "MouseEnter" event when the "enterTimout" is reached.
This timer is cleared when the "mouseleave" or the "mouseenterintent" event is triggered.

Maybe there's a misunderstanding of the goal of the "enterTimeout" option.
This option is not there to delay the event.
I'ts there to trigger the "mouseenterintent" event after a maximum time, when the mouse stay over the target element, even if the cursor is going faster than the speed limit all the time.

I'm not really at ease with English. If my answer is not understandable, please tell me :)

@LeMisterV LeMisterV was assigned Oct 3, 2011
@LeMisterV
Owner

HI,

after some verifications, I couldn't find a case where the enterTimeout option didn't work.

Here's an example to see the action of this option :
create a simple empty html doc.
insert in this doc a simple div element with this styles :
width: 800,
height: 600,
background: 'red'

call hoverintent with those values :
function() {
$(this).css('background', 'lime');
},
function() {
$(this).css('background', 'red');
},
{
enterTimeout : 4000,
maxSpeed : 30
}

When you load the page, you'll have a big red rectangle.
If you move the pointer over this area without stopping it (speed limit at 30, it's easy to kip over this limit.
After 4 seconds the rectangle will become lime. It's the enterTimeout.

I think you misunderstood the goal of enterTimeout, so I'll close this issue.
If I'm wrong, please tell me, and if you can give me a case where this option doesn't work, it could help me to fix the issue.

If I'm right, then you where maybe trying to use this plugin to have a delayed hover event.
To do this, you can use a negative "maxSpeed" options (maxSpeed : -1).
With this option, you disable the speed control. Than the only control used is the enterTimeout. Than if you define an enterTimout of 1000, you'll delay the event by 1 second.
And you can also delay the leave event using the leaveTimeout option (for leave event, there's no speed control, only a timeout).

Thanks,

Nico

@LeMisterV LeMisterV closed this Oct 3, 2011
@sgreenfield

I spent about an hour trying to figure out why the plugin seemed to be completely ignoring the "enterTimeout" option. Finally, I found issue #1 and realized that the only way to make it work was by explicitly setting maxSpeed to -1. You might want to rethink the way that works. I was attracted to your plugin over Brian Cherne's because you use an actual jQuery event, but I almost abandoned using yours as a result of this confusion. I'm an experienced JS developer, so I'm willing to bet that if I'm confused, a lot of other people will be too. Anyway, other than that issue, you have built a nice plugin.

@LeMisterV
Owner

Hi,

Thanks for your feedback.
As I explained in the previous comment, the main solution to detect the hoverintent event is not the enterTimeout.
The goal of this plugin is not only to defer the hover event.
The real goal is to guess if the user really wants to hover the element, and the best way to do this is to check the user's cursor speed over the element.
This speed control is the main detection solution.
As this solution is not always efficient (over big elements for example), another detection is added : enter timeout.
This timeout will be used only if the speed control doesn't detect anything but the cursor stays a long time over the element anyway.
Of course this case is really a specific case.

As you see, I think the plugin works the way it should, for the goal it was developed for.
Anyway, I probably not explained this right in the readme text, so I'll try to make this more clear ;)

And as you say, it's still possible to use this plugin as a simple hover timeout, using the maxSpeed = -1 option. But this is not the original goal of this plugin.

And the "maxSpeed" name is probably not very good for this option, I should probably also change this to a better name.

Nico

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.