Question

I have this routine which is called onmouseover of a certain element. I want there to be a slight delay – i.e. give the user time to mouseout before the effect takes place. The effect uses the event.clientX value. However it appears that by the time the callback is called – after 500ms – the event object no longer exists. How can I neatly persist the state of event.clientX?

function showTip(sDivID){
    SHOW_TIP_TIMEOUT_ID = setTimeout(function(){
        var div = $('#'+sDivID).show()[0];
        div.style.left = event.clientX;
    } ,500)
}

Answer 1

If you’re relying on this only working in Internet Explorer, you can just save the value before setting up the timeout:

function showTip(sDivID) {
  var x = event.clientX;
  SHOW_TIP_TIMEOUT_ID = setTimeout(function() {
    var div = $('#' + sDivId).show()[0];
    div.style.left = x;
  }, 500);
}

If you want this to work for other browsers, you’ll have to grab the event in the event handler itself and either pass it around or else stash it in a global (ick). Since you’re using jQuery, it already does all the browser normalization work for you, so you should take advantage of that.