How to wait for a function to execute in javascript

Question

I want that if a user clicks D a functions gets executes after one second and if a person clicks A before the code in timeout is executed, I want it to wait for the code to get executed. I dont know if this is possible with code I wrote. If it's possible please let me know how to do it. Any help will be highly appreciable. JQuery can be used too.

$(document).keydown(function (e) {
  // D click
  if (e.key === 'd' || e.key === 'D') {
    setTimeout(function () {
      console.log('d clicked')
    }, 1000)
  }
  // A click
  else if (e.key === 'a' || e.key === 'A') {
    console.log('a clicked')
  }
});

Set a global flag dIsRunning to true before the timeout. Set it to false within the timeout. Check if the flag is false before running anything else. — Heretic Monkey
– Heretic Monkey, Commented Jul 9, 2021 at 13:24
Actually I'm a bit new to javascript so I dont know much about it. Can you explain it with a code? — Ghayas Ud Din
– Ghayas Ud Din, Commented Jul 9, 2021 at 13:26
Does this answer your question? wait until condition is met or timeout is passed in javascript — Heretic Monkey
– Heretic Monkey, Commented Jul 9, 2021 at 13:31

user11229156 · Accepted Answer · 2021-07-09 13:59:36Z

1

You can use JavaScript promises to solve that problem. With them, it's possible to set a function to be executed right after another, that is, attaching callbacks, without polluting your code.

Read mode about promises here: Promise - JavaScript | MDN

In the code below, when 'a' is pressed, it verifies if there is a promise for 'd'. If so, it waits for the promise to be fulfilled, printing 'a clicked' to the console afterwards. If no, it prints the message at the same moment.

let d;

$(document).keydown(function (e) {
    // D click
    if (e.key === 'd' || e.key === 'D') {
        d = new Promise((resolve, reject) => {
            setTimeout(() => {
                console.log('d clicked');
                resolve();
            }, 1000)
        });
    }
    // A click
    else if (e.key === 'a' || e.key === 'A') {
        if (d) {
            d.then(() => {
                console.log('a clicked');
                d = null;
            })
        } else {
            console.log('a clicked');
        }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

answered Jul 9, 2021 at 13:59

user11229156

Sign up to request clarification or add additional context in comments.

2 Comments

benbotto Over a year ago

No need for the global d, which actually causes some issues. For example, rapidly press the D key a bunch of times. Note that, since d is reused, the number of times the "d clicked" message is logged does not match the number of times "D" was pressed.

Ghayas Ud Din Over a year ago

I want to set a promise on A click too and want to wait for A click function to execute before executing the d click function. Can you please tell me how to do that?

Collectives™ on Stack Overflow

How to wait for a function to execute in javascript

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related