on keydown execute function and and pause the execution of the next function JS

Question

For now I have that when key is down it changes colours, and as soon as it is up it changes back. But this is really quick and kinda causes migraine effect.

I want to do so when the key is pressed it would keep the changes for a second or two and then changes back to original colours without pausing any other function that is not inside these ones.

$(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>

To execute some code after some period of time, you can use `setTimeout`. https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout — Nicholas Tower, Dec 08 '17 at 14:15
or you can use library for this: https://stackoverflow.com/questions/8323474/jquery-how-to-fade-in-out-from-one-color-to-another-possible-3rd-party-plugi — vaso123, Dec 08 '17 at 14:16
@LaurynasStoma you can include JQuery on the left hand side if you're inserting a snippet. — kevinSpaceyIsKeyserSöze, Dec 08 '17 at 14:22
This feels like jQuery color animation which has a number of questions and answers. https://stackoverflow.com/questions/16863640/jquery-animate-and-backgroundcolor https://stackoverflow.com/questions/13461984/jquery-animate-not-working-with-colors https://stackoverflow.com/questions/190560/jquery-animate-backgroundcolor — Mark Schultheiss, Dec 08 '17 at 14:44

score 0 · Answer 1 · answered Dec 08 '17 at 14:26

Something among this lines should help you. You have to put some flag variable as helper, because only setTimeout would not help you,, cause each new keydown would just break setTimeout and then increase chances of migraine effects :)

Test it with left and right arrow keys:

$('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>

kemotoe · Answer 2 · 2017-12-08T14:40:13.967

Use a timeout on each keyup. If there's already a timeout running, clear it and set another.

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>

on keydown execute function and and pause the execution of the next function JS

2 Answers2