Периодическое тестирование элементов, которые добавляются в DOM после загрузки страницы

Question

У меня есть страница, на которой вы загружаете видео, затем эти видео кодируются (очень похоже на Youtube). Часть кодирования может занять некоторое время, и я хочу автоматически показать пользователю, выполняется ли кодирование, путем периодического опроса статуса кодирования изнутри страницы, если кодирование завершено, я хочу заменить значок кодирования кнопкой «воспроизведения», чтобы пользователь можете воспроизводить видео.

Поскольку сам список загруженных видео помещается в DOM с помощью AJAX (с jQuery), у меня возникают проблемы, когда я пытаюсь понять, как это сделать. Я бы хотел использовать для этого jQuery, но я не знаю, сможет ли jQuery это сделать.

Итак, шаги следующие:

1. пользователь загружает видео
2. пользователь возвращается на страницу
3. пользователь «раскрывает» список загруженных видео, некоторые закодированы, некоторые еще нет, закодированные имеют кнопки воспроизведения, некодированные имеют значки песочных часов
4. пользователь ждет, пока значки еще не закодированных видео не превратятся в кнопки воспроизведения
5. пользователь нажимает кнопку воспроизведения, и начинается воспроизведение фильма

Моя проблема только на шаге 4. Серверная часть также выполнена.

Answer 1

Используйте опрос. Установите интервал для опроса сервера (используя AJAX) каждые несколько секунд, чтобы проверить состояние задания кодирования. Когда сервер ответит «задание выполнено», обновите свой значок в DOM.

Если бы это был я, обработчик на стороне сервера ответил бы с процентом завершения (если это возможно, это будет зависеть от вашего API кодирования).

Answer 2

Если проблема в том, что вы не знаете, как заставить страницу опрашивать сервер каждые X секунд, вы можете сделать это с помощью javascript, используя setTimeout (функция, миллисекунды) и setInterval (функция, миллисекунды). Вы вводите свой код опроса в определение для функции.

Вот статья с подробностями.

Answer 3

Спасибо за отзыв о setInterval, это очень помогло мне попасть на полпути.

У меня было еще множество проблем с асинхронной природой вызовов jget.get (), которые я вызывал в функции, а затем в зависимости от результата вызова .get () должен возвращать true / false. Это не работает, если вы вызываете асинхронную функцию, насколько я обнаружил, по крайней мере. Эта асинхронная функция может вызывать другую функцию, которую я использовал для изменения DOM.

Мое окончательное решение этой проблемы заключается в следующем. Это немного хакерски, и Javascript не изящно деградирует, но код предназначен для системы-прототипа и будет использоваться только в контролируемой среде нескольких компьютеров, поэтому включение Javascript гарантировано.

О моем коде: я всегда отображаю значок кодировки И значок воспроизведения, но скрываю значок, который не имеет значения. Значок воспроизведения кликабелен и выдает всплывающее окно с видео.

См. Pastebin для моего решения.