CODEWITHSUNDEEP
javascriptjquerycss
LAN_scape
LAN_scape

Reputation: 97

Need to make JS wait for a CSS animation to be done before continuing

So I am making an elevator simulator and everything works great except for the elevator not being able to keep up with my JS. The elevator moves to the right spot in the UI but the queue is processed so quickly that the elevator ends up right where it began in a blink of an eye. I have tried using timeouts and callbacks in order to make my function wait but I have had no success. Each CSS animation takes 2 seconds to complete and the JS takes no time at all to run.

Here is the JS:

// Start the Simulation
    let first_in_queue = queue_list.firstElementChild; // Grab first event in queue
    first_in_queue.classList.toggle('in-progress'); // Update UI to show user that the event is in progress

    let first_in_queue_information = first_in_queue.innerHTML.split('-'); // Parse for needed information
    let elevator_destination = Number(first_in_queue_information[1].charAt(8)); // Grab the events destination floor
    let elevator_from = Number(first_in_queue_information[0].charAt(7)); // Grab the events origin floor

    moveElevator(elevator_from);
    sleep(200);
    moveElevator(elevator_destination);



function sleep(miliseconds) {
    var currentTime = new Date().getTime();

     while (currentTime + miliseconds >= new Date().getTime()) {}
}

This code does not work, all i get is a message in console saying "[Violation] 'click' handler took 201ms". I was not able to get the method to work using callbacks and after this solution did not pan out I thought to myself screw it, ask stack overflow.

Thank you for your time

Upvotes: 0

Views: 1014

Answers (2)

Daniil Ksenofontov
Daniil Ksenofontov

Reputation: 36

You can detect transitionend or animationend events

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/transitionend_event

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/animationend_event

Upvotes: 2

user3585659
user3585659

Reputation: 89

You can use JQuery's .ready() but you need to include the CSS above your JS files.

Here is a reference for the function https://api.jquery.com/ready/

Upvotes: 1

Related Questions