jquery - jquery 中的高性能单击和双击

Question

此代码的目的是创建一个高性能的单击和双击操作，
但它实际上工作得非常糟糕...它的性能根本不是很高，所以我想知道更好的方法来做到这一点

这样我就完全失去了单击的敏感性，现在只是延迟了，

而且双击也不是很出色..

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>