jquery - 1秒后允许按键

Question

我在按键上为 div 设置动画，但是如果我按向上箭头 2x 则我的动画会中断，有没有办法我只能在 1 秒后允许按键？

$(document).keyup(function(e){
    if (e.keyCode == 38) { 
        $('.selected').animate({'top':'300px'},500);
        $('.section.selected').removeClass('selected')
                              .next('.section').animate({'top':'0'},500)
                              .addClass('selected');
        return false;
    }
    e.preventDefault();
});

Answer 1

在触发进一步的动画之前检查元素是否正在被动画：

$(document).keyup(function(e){
  if (e.keyCode == 38) { 
    if(!$('.selected').is(':animated')){

      $('.selected').animate({'top':'300px'},500);       
      $('.section.selected').removeClass('selected').next('.section').animate({'top':'0'},500).addClass('selected');
      return false;
    } 
  }    
  e.preventDefault();
});

Answer 2

尽可能从字面上实现您的要求：

var allowKeyPress = true;
$(document).keyup(function(e){
if (e.keyCode == 38) { 
    if (!allowKeyPress)
        return false;
    allowKeyPress = false;
    setTimeout(function() { allowKeyPress = true; }, 1000);

    $('.selected').animate({'top':'300px'},500);
    $('.section.selected').removeClass('selected').next('.section').animate({'top':'0'},500).addClass('selected');
    return false;    
  }    
  e.preventDefault();
});

即使用一个标志，allowKeyPress- on keyup 测试标志是否为false，如果是则立即停止。否则，继续，将标志设置为false并使用setTimeout()来安排功能在一秒钟后运行以将标志设置回true，当然还有运行动画。

Answer 3

您可以查明是否有任何元素正在制作动画并取消新动画。所以把下面的代码作为你的key-up函数的第一行。

if($(".selected").is(":animated")) return;

Answer 4

尝试这个：

$(document).keyup(function(e){
     if (e.keyCode == 38 && !$('.selected').is(':animated')) { 
          $('.selected').animate({'top':'300px'},500);
          $('.section .selected').removeClass('selected')
                               .next('.section')
                               .animate({'top':'0px','position':'relative'},500)
                               .addClass('selected');
          return false;
      }
      e.preventDefault();
});