Question

现在我知道，当按键关闭时，它会改变颜色，一旦启动它就会改变颜色。但这真的很快，有点导致偏头痛的影响。

我想在按下键时这样做，它会将更改保留一两秒，然后更改回原始颜色，而不会暂停任何其他不在这些内部的功能。

$(window).on('keydown', function (e) {
    if (e.keyCode == 39 || e.keyCode == 32) {
      $('body').css('background', '#26A65B');
      $('#word').css('color', '#415A77');
    }
    if(e.keyCode == 37) {
      $('body').css('background', '#D64541');
      $('#word').css('color', '#415A77');
    }
  });
$(window).on ('keyup', function (e) {
    if (e.keyCode == 39 || e.keyCode == 32 || e.keyCode == 37) {
      $('body').css('background', '#415A77');
      $('#word').css('color', '#ed7d3a');
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 1

这些内容中的某些内容可以帮到你。你必须把一些标志变量作为助手，因为只有setTimeout不会帮助你，因为每次新的keydown都会破坏setTimeout然后增加偏头痛效应的机会：）

用左右箭头键测试：

$('body').focus();
var flag = false;
$(window).on('keydown', function (e) {
    if (flag) return;
    if (e.keyCode == 39 || e.keyCode == 32) {
      $('body').css('background', '#26A65B');
      $('#word').css('color', '#415A77');
    }
    if(e.keyCode == 37) {
      $('body').css('background', '#D64541');
      $('#word').css('color', '#415A77');
    }
  });
$(window).on ('keyup', function (e) {
    if( flag ) return;
    if( ! flag ) flag = true;
    setTimeout( function(){
      flag = false;
      if (e.keyCode == 39 || e.keyCode == 32 || e.keyCode == 37) {
        $('body').css('background', '#415A77');
        $('#word').css('color', '#ed7d3a');
      }
    }, 2000);
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

在每个密钥上使用timeout。如果已经超时，clear it并设置另一个。

let timeout = null;
$(window).on('keydown',(e => {
  if (e.keyCode == 39 || e.keyCode == 32) {
    $('body').css('background', '#26A65B');
    $('#word').css('color', '#415A77');
  }
  if (e.keyCode == 37) {
    $('body').css('background', '#D64541');
    $('#word').css('color', '#415A77');
  }
}));
$(window).on('keyup',(e => {
  if (e.keyCode == 39 || e.keyCode == 32 || e.keyCode == 37) {
    if (timeout !== null) {
      clearTimeout(timeout);
    }
    timeout = setTimeout(() => {
      $('body').css('background', '#415A77');
      $('#word').css('color', '#ed7d3a');
    }, 2000);
  }
}));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="word">Hello</div>

在keydown执行函数并暂停执行下一个函数JS

2 个答案: