How to delay the changing of a value in jQuery?

I'm making a map using Raphael and jQuery. I've got a search box - when the mou开发者_如何学JAVAse enters a region, the search box displays the name of that region, and when the mouse exits it, the search box changes to a preset text (along the lines of "type here to search").

However, when I move the mouse across the map, the search box's contents flicker quickly between region names and the preset text. I tried fixing it using .delay(), but it didn't work - only then did I read that delay() only works with effects.

How do I delay a value change using .val()?

---

Live Demo

You can delay it by using setTimeout reference

var timer;

$('.hova').hover(function(){
    var text = $(this).text();
    clearTimeout(timer);
    timer = setTimeout(function(){$('input').val(text)},500);
});