how to control/delay subsequent click events on same element
<pre><code>$navNext.click(function(event, $diff) {
        if(!$diff) {
            var $lastLi = $nav.find('li:last');
            var $lastLiRight = $lastLi.offset().left + $lastLi.outerWidth();
            if ($arrowsNavRight &lt; $lastLiRight)
                $diff = Math.min($lastLiRight - $arrowsNavRight, 50);
        }

        if($diff) {
            $navPrev.show('fade');
            $nav.animate({
                left: '-='+$diff
                }, function(){
                showNavs();
            });
        }
});
</code></pre>

<p>This is click-handler of one <code>li</code> element. This calculation is to navigate a <code>ul</code> list of scrollable tabs.
User can click several time on this <code>li</code> to reach desired position. but when there is no scope to scroll further I disable this <code>li</code>.</p>

<p>Problem is: if user click on this <code>li</code> elements too fast then all this click events will be
performed before hiding <code>li</code> (calling showNavs function). which can lead to extra scroll of <code>ul</code>.</p>

<p>I want to control  subsequent click event on this <code>li</code>.
means, if one click is in progress then delay the next click. is there any way to do it?</p>

<p>Thanks</p>
