on keydown 执行函数并暂停执行下一个函数 JS答案

【问题标题】：on keydown execute function and and pause the execution of the next function JSon keydown 执行函数并暂停执行下一个函数 JS
【发布时间】：2017-12-08 14:13:00
【问题描述】：

现在我知道，当按键按下时它会改变颜色，一旦按下它就会变回来。但这真的很快，而且有点引起偏头痛的影响。

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

$(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');
    }
});

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

【问题讨论】：

要在一段时间后执行一些代码，你可以使用setTimeout。 developer.mozilla.org/en-US/docs/Web/API/…
或者您可以为此使用库：stackoverflow.com/questions/8323474/…
@LaurynasStoma 如果要插入 sn-p，您可以在左侧包含 JQuery。
这感觉就像有很多问题和答案的 jQuery 彩色动画。 stackoverflow.com/questions/16863640/…stackoverflow.com/questions/13461984/…stackoverflow.com/questions/190560/…

标签： javascript jquery animation

【解决方案1】：

这行中的某些内容应该对您有所帮助。你必须把一些标志变量作为助手，因为只有setTimeout 不会帮助你，因为每个新的按键都会打破 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);
  });

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：

【解决方案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>

【讨论】：