Delay before sending ajax request does not work

Question

When I do hover over <td> it does wait 900 milliseconds and then sends a lot of requests (I always hover over more tds in these 900ms). What am I doing wrong? why only clearTimeout (commented) works?

My point is to wait before hitting server and if user move mouse to another <td> in this running countdown (900ms), previous countdown is aborted and new one takes place

        $(function(){
                var isLoading = false;
                $("td").hover(function(){
                        var x = parseInt(0);
                        var position = $(this).attr('id');
                        clearTimeout(timer);
                        var oID = $(this).attr('id');
                        var oData = $(this);
                        var timer = setTimeout(function(){
                                if (position == oID&&!isLoading)
                                {
                                        clearTimeout(timer);
                                        $.ajax({
                                                beforeSend: function(xhr){ var isLoading = true; },
                                                url: 'ajax.php?what=click&position='+position,
                                                success: function(data){
                                                        $('#hovercard').css(oData.offset());
                                                        $('#hovercard').show();
                                                        $('#hovercard').html(data);
                                                }
                                        });
                                }
                        }, 900);
// this only works ->                                             clearTimeout(timer);
                });
        });

Answer 1

You will need to store timer in a scope outside the hover function. I'm not so sure about the scope for isLoading either, so if this doesn't work, try moving isLoading out to the same scope as timer :

    var timer;
    $(function(){
            var isLoading = false;
            $("td").hover(function(){
                    var x = parseInt(0);
                    var position = $(this).attr('id');
                    clearTimeout(timer);
                    var oID = $(this).attr('id');
                    var oData = $(this);
                    timer = setTimeout(function(){
                        if (position == oID&&!isLoading)
                        {
                                clearTimeout(timer);
                                $.ajax({
                                        beforeSend: function(xhr){ isLoading = true; },
                                        url: 'ajax.php?what=click&position='+position,
                                        success: function(data){
                                                    $('#hovercard').css(oData.offset());
                                                    $('#hovercard').show();
                                                    $('#hovercard').html(data);
                                        }
                                });
                        }
                   }, 900);
           });
   });

You have some other oddities as well. Note that oID always will be equal to position as they are set at the same time, in the same scope. This makes the first condition in your if statement pointless. I've also removed the var statement in your beforeSend function.