You need to write a function that counts pressing a certain button (in my case, a space) for a limited time. If the user has pressed the button the required number of times, the function should immediately return 1 (and not wait until the time is up), if the time is out then 0. My own code does not wait 10 seconds, but immediately displays "fail"; in addition, after quitting the qte function, it continues to respond to pressing the space bar.

var count = 0; var flag; function qte() { console.log('start'); var timerId = setTimeout(failed, 1000); $(document).keydown(function(key) { if (parseInt(key.which) === 32) { count++; console.log(count); if (count === 10) { clearTimeout(timerId); count = 0; flag = true; return; } } }); console.log(flag); if (flag !== undefined) return; } function failed() { flag = false; return; } $(document).ready(function() { $('div').click(function() { qte(); if (flag) console.log('success'); if (flag === false) console.log('fail'); return; }); }); 
 div { height: 100px; width: 100px; border-radius: 100%; background-color: #ABCDEF; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <div></div> </body>

  • one
    $(document).keydown(function(key) { each time handler hangs up - Grundy
  • How then can you get around / replace it? - Yarr pm

2 answers 2

1.Why all the same despite "setTimeout (failed, 1000);" there is no delay, and "fail" is immediately output to the console

You need to read about asynchronous code. If in short, setTimeout postpones its execution, and the code behind it starts executing and console.log is executing before you expect it.

2. If keydown is only hang once, how can you track the space bar?

Just hang the handler once. He does not stop listening to the event after it passes once through the function. When you no longer need to listen, just shoot the handler.

In your case, something like this will be released:

 $(document).ready(function () { start(); }); var timerId = null; function start() { var count = 0; $(document).on('keydown', function(evt) { if (evt.which !== 32) { // вроде как evt.witch всегда int return; } if (++count === 10) { finish(true); } } timerId = setTimeout(function () { finish(); }, 1000 * 10); // через 10 сек } function finish(isWin) { clearTimeout(timerId); $(document).off('keydown'); if (isWin) { alert('Поздравляю! Вы выйграли'); } else { alert('Вы проиграли. Попробуйте еще раз'); } }
  • Accordingly, it is possible to hang up a handler on some button, and the start handler can be started - Pleshevskiy

Each time when the qte function is qte an event handler is hung up and more and more becomes each time (it is not replaced, but one is added).
Each time you can delete the previous handler, in the following way:

 $(document).unbind('keydown').keydown(function(key) { ...

Or hang it once, not every time you call a function.

  • Thanks for the advice, but there are still a few questions left: 1. Why, despite all the "setTimeout (failed, 1000);" there is no delay, and "fail" is immediately output to the console. 2. If the keydown is only hanged once, how can you track the space bar? - Yarr