點擊次數過多後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停止加載功能

回答

相關問題