点击次数过多后Jquery停止加载功能

在链接上点击过多次用户后，如何停止加载功能？点击次数过多后Jquery停止加载功能

jQuery代码看起来像：

$(document).ready(function(){ 
$(".menu_rfr").click(function() { 
$("#main").html('<img src="img/spin.gif" class="spin">'); 
location.replace($(this).attr('rel')); 

}); 

$(".menu_clickable").click(function() { 
$("#main").html('<img src="img/spin.gif" class="spin">'); 
$("#main").load($(this).attr('rel')); 

}); 

});

HTML：

<div class="menu_rfr prof_info" id="prof_info" rel="?a=1">info</div> 
<div class="menu_clickable prof_info3" id="prof_info" rel="?a=3">info 3</div>

编辑：

这是采样页面的这个jQuery代码的链接。 link text

来源

2010-05-10 Sergio

你能否更详细的限制是什么？例如他们不能点击，直到它完成加载，或其他？ – 2010-05-10 12:07:07

即使加载未完成，他们也可以点击。那就是问题所在。我怎样才能防止呢？ – Sergio 2010-05-10 12:20:20

禁用按钮，一旦它被点击：

$(".menu_clickable").click(function() { 
    $(this).attr("disabled", "disabled"); 
    $("#main").html('<img src="img/spin.gif" class="spin">'); 
    $("#main").load($(this).attr('rel'), function() { 

     // reactivate it after some loading has completed 
     $(this).removeAttr("disabled");   
    }); 
});

你应该总是激活success回调中的链接，以确保装载完成后，如：

$.get($(this).attr('rel'), function(html) { 
    $("#main").html(html); 
    $(this).removeAttr("disabled"); 
});

编辑：根据您的评论进行更新。如果你的“动作”元素是一个div，你将不得不解除绑定click事件，以防止再次点击次数有一定影响，并重新绑定，一旦装载完成如：

function handleClick() { 
    $(this).unbind("click"); 
    $("#main").html('<img src="img/spin.gif" class="spin">'); 
    $("#main").load($(this).attr('rel'), function() { 

     // reactivate it after some loading has completed 
     $(this).click(handleClick);   
    });   
} 
$(".menu_clickable").click(handleClick);

来源

2010-05-10 12:07:17 karim79

如果你使用''。load（）'callback :) – 2010-05-10 12:12:11

@Nick - 据我所知，'load'确保注入在随后的语句触发之前发生，但它对其他方法很重要。 '$ .get'，'$ .post'等。 – karim79 2010-05-10 12:14:22

@karim - Nah它是异步的，它仍然调用'$ .ajax'并在下面使用'success'回调函数：http://github.com/jquery/jquery/ blob/master/src/ajax.js＃L15 – 2010-05-10 12:17:00

卡里姆说做什么但不仅检查它是否被点击过，而且该功能成功获取数据。但如果你的负载得到新的更新，每次按它不会工作。

另一个想法是假设有太多快速点击的双击，所以只需为元素上的dblclick事件返回false。

来源

2010-05-10 12:10:17 XGreen

如果你不使用输入字段（禁用），你可以使用.data()跟踪的请求是否正在进行，而不是连续的响应点击。

$(".menu_clickable").click(function() { 
    var menuItems = $('.menu_clickable'); 

    if (!menuItems.data('current')) { 
     $("#main").html('<img src="img/spin.gif" class="spin">'); 
     $("#main").load($(this).attr('rel'), function() { 
      menuItems.removeData('current'); 
     }); 

     menuItems.data('current', true); 
    }; 
});

如果你想允许点击次数（？），你可以使用相同的方法，但存储计数器，而不是一个简单的布尔值。

来源

2010-05-10 12:10:31 Matt

您可以在此情况下，使用.live()以及漂亮干净，像这样：

$(".menu_clickable:not(.disabled)").live('click', function() { 
    $(this).addClass('disabled'); 
    $("#main").html('<img src="img/spin.gif" class="spin">') 
      .load($(this).attr('rel'), function() { 
       $(this).removeClass('disabled'); 
    }); 
});

这是通过使用.live()监听事件泡沫和运行您的处理程序。当你开始一个负载时，它将“禁用”类添加到元素，使其不再满足.live()选择器，从而阻止它执行。当负载完成后，它会删除类，使它再次满足.live()选择器和手柄将工作/再次执行上click。

作为奖励，你可以轻松地创建一个匹配的CSS规则来指示，它是禁用的，这样的用户：

.disabled { color: red; }

来源

2010-05-10 12:20:33

点击次数过多后Jquery停止加载功能

回答

相关问题