0 
$navNext.click(function(event, $diff) {
        if(!$diff) {
            var $lastLi = $nav.find('li:last');
            var $lastLiRight = $lastLi.offset().left + $lastLi.outerWidth();
            if ($arrowsNavRight < $lastLiRight)
                $diff = Math.min($lastLiRight - $arrowsNavRight, 50);
        }

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

这是一个li元素的点击处理程序。此计算用于导航ul可滚动选项卡列表。用户可以单击几次li以到达所需位置。但是当没有进一步滚动的空间时，我禁用它li。

问题是：如果用户点击这个li元素的速度太快，那么所有的点击事件都将在隐藏之前执行li（调用 showNavs 函数）。这可能导致ul.

我想控制随后的点击事件li。意思是，如果一次单击正在进行，则延迟下一次单击。有什么办法吗？

谢谢

4

3 回答 3

0

使用active变量。如果事件触发，首先检查是否active == false. 如果没有，请不要运行您的脚本。如果它是假的，那么设置它true并做你的事情。当脚本运行时，没有其他事件会使该脚本运行。在脚本结束时，将active变量重置为 false 以启用新事件。

于 2012-06-04T07:38:48.017 回答
0

你可以做这样的事情

HTML

<a href="#" class="fastclick">Click</a>​

jQuery

var bool = 1;
var tmr;

$(".fastclick").live("click", function(e) {
    if(bool)
    {
        alert("next click after 3 sec");
        bool = 0;
        tmr = setInterval(doTmr,3000);
    }
});

function doTmr()
{
    if(!bool)
    {
        bool=1;
        clearInterval(tmr);
    }
}
​

工作示例

于 2012-06-04T08:42:00.627 回答
0

我有类似的问题。我通过引入加载 gif 图像解决了它......当我想阻止用户单击页面上的任何内容时显示它并在上一个操作完成时隐藏它。

<script type="text/javascript"> 
function showLoadingBar() {     
$('#overlay').addClass('loading-indicator-overlay');
 $('#loadingbar').addClass('loading-indicator'); }
 function hideLoadingBar() {
 $('#overlay').removeClass('loading-indicator-overlay');
     $('#loadingbar').removeClass('loading-indicator'); } 
</script>

并在正文部分添加以下内容：

<body>
 <div id="overlay"></div>
 <div id="loadingbar"></div>
 ....
 .... 
</body>

添加以下样式

<style type="text/css">
.loading-indicator {
 position: absolute;
  height: 80px;
 width: 80px; 
 left: 50%; 
 top: 50%;
 z-index: 1001;
 background: url( '../images/loading.gif' );
 background-repeat: no-repeat;
 background-position: center center; }

//Class for overlay:

.loading-indicator-overlay {
 position: absolute;
  width:100%;
 height: 100%;
 z-index: 1000;
 background-color: black;
 opacity: 0.6; }
 </style>

并showLoadingBar()在用户单击时li调用并hideLoadingBar()在您希望用户能够单击时调用li

于 2012-06-04T07:47:22.273 回答