Question

此代码的目的是创建一个高效的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>

Answer 1

你的代码看起来很好。处理点击和双击的问题之一是你必须在另一个之前显示一个结果。否则，您必须对单击的人施加延迟。

下面的代码只是将您的$('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>

Answer 2

你所拥有的是伟大的，我会说，就逻辑而言，没有办法改善这一点。唯一的办法就是延长delay，以便更容易获取。老人们有时会慢慢点击鼠标......：P

你的延迟： http://jsfiddle.net/0928paqh/1/

延迟时间更长： http://jsfiddle.net/0928paqh/2/

对于速度较慢的用户而言足够长，但不足以让任何人烦恼。

高效点击并在jquery中双击

2 个答案: