Question

我有一个div网格，其中class是“box”，并且希望用户能够点击其中两个，然后必须等待两秒才能点击另一个。

据我所知......

var clickNumber = 0;

$(".box").click(function () {
    $(this).removeClass('red').addClass('blue');
    switch (clickNumber){
        case 0:
            clickNumber++;
            break;
        case 1:
            setTimeout(function() {
                //disable click for class "box"
        }, 2000);
            clickNumber = 0;
            break;
    }
});

更完整的例子......

http://jsfiddle.net/wZP6J/

谢谢！

Answer 1

使用变量来跟踪是否应允许点击，如下所示：

var clickNumber = 0,
    clicksAllowed = true;

$(".box").click(function () {
    if(clicksAllowed){
        $(this).removeClass('red').addClass('blue');
        switch (clickNumber){
            case 0:
                clickNumber++;
                break;
            case 1:
                clicksAllowed = false;
                setTimeout(function() {
                    //disable click for class "box"
                    clicksAllowed = true;
                }, 2000);
                clickNumber = 0;
                break;
        }
    }
});

Here's the updated fiddle

Answer 2

See this fiddle

只需存储unix纪元时间戳，然后将其与最后一个进行比较。如果它超过2秒，那么做你需要做的任何事情。无需设置超时。

;(function() {
    var clickNumber = 0;
    var lastClickTime = 0;

    $(".box").click(function () {
        var seconds = new Date().getTime() / 1000;

        if ((seconds - lastClickTime) > 2) {
            $(this).removeClass('red').addClass('blue');
            clickNumber++;
            lastClickTime = seconds;
        }
    });
})();

另外，请注意我使用了一个闭包来保持我的相关变量不在全球范围内，以防止它们被污染。

Answer 3

保留“框”集合的引用，并在switch语句中启用/禁用它们：

var clickNumber = 0;
var boxes = $('.box');

boxes.click(function () {

    if (clickNumber == 1)
    {
        return; // just in case ;)
    }

    $(this).removeClass('red').addClass('blue');

    switch (clickNumber){
        case 0:
            clickNumber++;
            break;
        case 1:
            // disable boxes
            boxes.prop('disabled', 'disabled');

            setTimeout(function() {
                //enabled boxes after 2 seconds
                boxes.prop('disabled', '');
                clickNumber = 0;
            }, 2000);

            break;
    }
});

Answer 4

将您的代码更新为working JsFiddle：

var clickNumber = 0;    
$(".box").click(function () {    
    switch (clickNumber) {
        case 0:
            $(this).removeClass('red').addClass('blue');
            clickNumber++;
            break;
        case 1:
            setTimeout(function () {
                clickNumber = 0;
            }, 2000);
            clickNumber++;
            break;

    }
});

Answer 5

你去......

var clickNumber = 0;

$(".box").on('click', boxClick);

function boxClick() {
    clickNumber += 1;
    $(this).removeClass('red').addClass('blue');
    if(clickNumber == 2) {
        $(".box").off();
        setTimeout(function() {
            $('.box').on('click', boxClick);
            clickNumber = 0;
        },2000);
    }
}

小提琴：http://jsfiddle.net/wZP6J/2/

Answer 6

试试这个：Live Demo

var clickNumber = 0;

function disableClick() {
    // Disable click event for now
    $(".box").unbind('click');

    // Turn on click after timeout
    setTimeout(enableClick, 2000);
}

function enableClick() {
    $(".box").click(function () {
        $(this).removeClass('red').addClass('blue');
        switch (clickNumber) {
            case 0:
                clickNumber++;
                break;
            case 1:
                disableClick();
                clickNumber = 0;
                break;
        }
    });
}

enableClick();

Answer 7

的 LIVE DEMO

function clicking(){ $(this).removeClass('red').addClass('blue'); $(".box").off('click', clicking); setTimeout(function(){ $(".box").on('click',clicking); },2000); } $(".box").on('click', clicking);

Answer 8

即使您不需要clickNumber Count

var f1 = function(){
  $(this).removeClass('red').addClass('blue');
   $(".box").unbind('click');
            setTimeout(function() {
                 $(".box").click(f1);
            }, 2000);
}
$(".box").click(f1);

http://jsfiddle.net/wZP6J/6/

Answer 9

我在那里！嗯，我根据你给我的代码为你找到了一个解决方案（这样你不需要改变很多）。

看看它：http://jsfiddle.net/NAGKk/

var clickNumber = 0;
$(".box").click(function () {
if(clickNumber<2)
    $(this).removeClass('red').addClass('blue');
    switch (clickNumber){
        case 0:
            clickNumber++;
            break;
        case 1:
            clickNumber++;
            setTimeout(function() {
                clickNumber = 0;
            }, 2000);
            break;
    }
});

setTimeout的主要思想是，经过一段时间后它会触发你放入的东西（你已经知道了），但你必须记住的是javascript一直在运行（否则一些网站会因超时而冻结））。此解决方案仅使用您的var clickNumber，并在用户点击两次以上时阻止点击效果。 setTimeout将在2秒后触发clickNumber的重置。

希望有所帮助

在第二次单击时禁用所有点击两秒钟？

9 个答案: