При втором нажатии отключить все клики в течение двух секунд?

Question

У меня есть сетка divs, где 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

Держите ссылку сборника «коробки» и включить/отключить их в операторе переключателя:

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 граф

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 будет вызывать сброс на clickNumber через 2 секунды.

Надеюсь, это поможет