Необходимо JS дождаться CSS анимации, прежде чем продолжить - PullRequest
0 голосов
/ 11 марта 2020

Итак, я делаю симулятор лифта, и все работает отлично, за исключением того, что лифт не в состоянии угнаться за моим JS. Лифт перемещается в нужное место в пользовательском интерфейсе, но очередь обрабатывается так быстро, что лифт заканчивается там, где он начался в мгновение ока. Я пытался использовать таймауты и обратные вызовы, чтобы заставить мою функцию ждать, но у меня не было успеха. Каждая CSS анимация занимает 2 секунды, а JS совсем не требует времени для запуска.

Вот 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()) {}
}

Этот код не работает, все, что я получаю, это сообщение в консоли с надписью «Обработчик клика [Violation] занял 201мс». Я не смог заставить метод работать, используя обратные вызовы, и после того, как это решение не сработало, я подумал, что нужно его прикрутить, попросить переполнение стека.

Спасибо, что уделили время

Ответы [ 2 ]

2 голосов
/ 11 марта 2020
1 голос
/ 11 марта 2020

Вы можете использовать JQuery .ready(), но вам нужно включить CSS над вашими JS файлами.

Вот справочник по функции https://api.jquery.com/ready/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...