此代码的目的是创建一个高效的click
和double click
操作,
但它实际上非常糟糕......它的性能不是很高,所以我想知道一个更好的方法来做到这一点
通过这种方式,我完全失去了单击的感觉,现在它只是延迟了,
并且双击也不是很好......
var DELAY = 150, clicks = 0, timer = null;
$(function(){
$('button').on("click", function(e){
clicks++;
if(clicks === 1) {
timer = setTimeout(function() {
$('button').html("Single Click");
clicks = 0;
}, DELAY);
} else {
clearTimeout(timer);
$('button').html("Double Click");
clicks = 0;
}
})
.on("dblclick", function(e){
e.preventDefault();
});
});
button {
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button>click Me</button>
答案 0 :(得分:3)
你的代码看起来很好。处理点击和双击的问题之一是你必须在另一个之前显示一个结果。否则,您必须对单击的人施加延迟。
下面的代码只是将您的$('button').html("Single Click");
移到了计时器功能之外,因此它会立即响应按钮而不是等待用户双击。
var DELAY = 350, clicks = 0, timer = null;
$(function(){
$('button').on("click", function(e){
clicks++;
$('button').html("Single Click");
if(clicks === 1) {
timer = setTimeout(function() {
clicks = 0;
}, DELAY);
} else {
clearTimeout(timer);
$('button').html("Double Click");
clicks = 0;
}
})
.on("dblclick", function(e){
e.preventDefault();
});
});
button {
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button>click Me</button>
答案 1 :(得分:0)
你所拥有的是伟大的,我会说,就逻辑而言,没有办法改善这一点。唯一的办法就是延长delay
,以便更容易获取。老人们有时会慢慢点击鼠标......:P
你的延迟: http://jsfiddle.net/0928paqh/1/
延迟时间更长: http://jsfiddle.net/0928paqh/2/
对于速度较慢的用户而言足够长,但不足以让任何人烦恼。