<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>ajax消抖Demo</title>
<script type="text/javascript" src="js/jquery-2.0.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css"> <script type="text/javascript">
$(function() {
var i = 1; // 计时器计时次数
var firstClick = true;
var _interval; $("input").click(function(){ // 模拟按键抖动,假定抖动延迟为1s.则1s内所有按键都判定为一次按键请求
if (i != 1) {
firstClick = false;
} else{
firstClick = true;
}
_interval = setInterval(myTimer, 200); // 计时开始
if (firstClick) { // 按键未抖动,ajax执行
$(this).val("ajax中,请骚等...")
// 模拟ajax网络延时,假设为4s,延时过程中,用户不能再次发起ajax请求
var test = setTimeout(function(){
myAjax()
},4000);
} else{ // 按键抖动中,取消ajax
//$(".msgBtn").css('display', 'block');
alert("111");
return ;
};
}); function myAjax() {
$(".msg").css({
height: '160px'
});
$(".msg").load("test.html", function() {
$("input").val("ajax done!");
});
// ajax success
} // 计时器
function myTimer() {
i++;
if (i > 5)
{
i = 1;
$(".msgBtn").css('display', 'none');
clearInterval(_interval);
}
}
});
</script>
</head>
<body style="text-align:center;">
<input type="button" value="ajax" />
<div class="msgBtn" style="display:none">上次按键抖动中...</div>
<div class="msg">userInfo</div>
</body>
</html>
这是ajax请求test.html文件:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
</head>
<body>
<h3 align="left">userInfo:</h3>
<table id="teble1" border="1" cellspacing="0" cellpadding="0" align="center">
<tr>
<td width="100px">Name:</td>
<td width="100px">cxs</td>
</tr>
<tr>
<td width="100px">Sex:</td>
<td width="100px">boy</td>
</tr>
<tr>
<td width="100px">Age:</td>
<td width="100px">24</td>
</tr>
</table>
</body>
</html>
抖动延迟时间可以自由设置,抖动过程中用户再次点击的话判定为上一次点击,也就是一段时间内用户所有的点击都判定为一次触发点击事件.