Many setTimeouts for scrolling events

I want to show a tooltip when mousewheel scroll even is triggered. Here is the current code:

if (window.hideTimeout) 开发者_如何转开发{
    clearTimeout(window.hideTimeout);
}
handle.qtip('show');
window.hideTimeout = setTimeout(function() { handle.qtip('hide'); }, 1000);

This works correctly, however it runs slowly in Firefox when scrolling quickly, presumably because of the many setTimeouts being used. I was wondering if there is a better solution to this? I want the tooltip to hide if there have been no scroll events for a second, essentially.

THanks

I think the bottleneck is in the handle.qtip call, so use

if (window.hideTimeout) {
    clearTimeout(window.hideTimeout);
    //qtip is already shown.
}
else
{
    handle.qtip('show');
}
window.hideTimeout = setTimeout(function() { handle.qtip('hide'); window.hideTimeout=false}, 1000);

You could also not create a new anonymous function every time for the setTimeout. Just create it once and use it over and over again.

//define once
var tipHide = function(){handle.qtip('hide'); window.hideTimeout=false}
...
//use many times
window.hideTimeout = setTimeout(tipHide, 1e3);

Try this out:

window.hideTimeout = function(){
    clearTimeout(window.hideTimeout);
    return setTimeout(function(){ handle.qtip('hide'); },1000);
}

This essentially clears your tiemout before registering a new one..

If all else fails, take a look at the debounce function from underscore.js.