jQueryAjax模拟按键消抖(可设置抖动延迟时间)
2020-11-27 09:56
阅读：510
YPE html>
标签：style blog class code java ext
在硬件中,按键等都会有抖动现象,如何消除抖动,不重复触发事件呢,这就要用到消抖机制了.
这是我用jQuery模拟硬件消抖原理,额,可能是吧...又不对的地方,希望有高手指点指点.
?
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
|
src="js/jquery-2.0.0.min.js">
>
$(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);
}
}
});
|
这是ajax请求test.html文件:
userInfo:
| Name: | cxs |
| Sex: | boy |
| Age: | 24 |
抖动延迟时间可以自由设置,抖动过程中用户再次点击的话判定为上一次点击,也就是一段时间内用户所有的点击都判定为一次触发点击事件.
jQueryAjax模拟按键消抖(可设置抖动延迟时间),搜素材,soscw.com
jQueryAjax模拟按键消抖(可设置抖动延迟时间)
标签：style blog class code java ext
原文地址：http://www.cnblogs.com/newbie-cc/p/3708305.html
上一篇：html 块状元素 内联元素
下一篇：[技术专题] .NET 框架
评论
亲，登录后才可以留言！