Prototype JS: mouseover with timer?

I'm new to Prototype JS (and javascript in general), and I'm trying to make an overlay appear after the user has hovered over an element on the page for half a second. Currently, I'm accomplishing this with:

$$("a.tag").invoke('observe', '开发者_Python百科mouseover', function() {
//my code here
});

This code makes the overlay appear when the trigger element is moused over, but how do I add the half second pause?

Do this:

var timerId;

$$("a.tag").invoke('observe', 'mouseover', function() {
  timerId = setTimeout(function() {
     // code here
  }, 500);
});

$$("a.tag").invoke('observe', 'mouseout', function() {
  if (timerId) {
    cancelTimeout(timerId)
    timerId = null;
  }
});

I Think you could add a class waitingEndDelay to your element. Then code your "show function" in order to be executed only if element has no waitingEndDelay class. At the end of the delay remove waitingEndDelay.