Связь с администрацией сайта:       

demo

Среди толпы я одинок

JS Создание простого ProgressBar с помощью Web Workers API

Сегодня мы создадим ProgressBar(ПрогрессБар) на javascript в ассинхронном режиме. Ничего сложного, на самом деле, в этом нет. Нет необходимости подключать дополнительные библиотеки, мы весь код реализуем по средству стандартных методов javascript и Web Workers API.
 
 
Приступим непосредственно к написанию самого кода.
Для этого, реализуем такой код на html:
<div id = "StatusBar"> </div> <!---- Инфо состояния ПрогрессБара  -->
	<div>
              <!---- Кнопка запуска ПрогрессБара  -->
	      <button id = "ButtonRunBar">Запуск ПрогрессБара JS</button>  
	</div>
	<!---- ПрогрессБар  -->
	<progress id = "ProgressBar" value = "0" max = "100"></progress> 
 
С htmlразобрались. Далее нас ждет сам код на js для создания прогресса.
Сперва создайте пустой файл progress.js. Позже мы к нему вернемся.
Чтобы не делать лишнюю обвязку на onload, то добавьте скрипт после кода html.
 
<script>
//Вытаскиваем из html ProgressBar, поле инфо загрузки и поле состояния загрузки
		var	ProgressBar = document.getElementById("ProgressBar"), 
			procents = document.getElementById("procents"),
			StatusBar = document.getElementById("StatusBar");
 
//Вешаем событие на нажатие кнопки
		document.getElementById("ButtonRunBar").onclick = function (){			
			var worker = new Worker("progress.js"); //Добавляем объект worker 
			var self = this; //Присваиваем переменной объект нашей кнопки
				worker.postMessage(10000000); //Отдаем значение методом postMessage в progress.js
				worker.onmessage = function (event){ //Принимаем значение из progress.js через onmessage
					procents.innerHTML = event.data; //Добавляем текущее значение в поле с id = procents
					ProgressBar.value = event.data; //Добавляем текущее значение в ProgressBar
					if (event.data == 100) { //Проверяем текущее значение 
						StatusBar.innerHTML = "Загрузка окончена";
					}
				};
			self.disabled = "disabled"; //Отключаем кнопку, чтобы случайно не нажать на нее еще раз	
		};
 
	</script>
 
 
После этого откройте созданный ранее файл progress.js. И добавьте код, написанный ниже:
 
onmessage = function (event){ //Событие onmessage 
	var procent = Math.round(event.data*0.1),
		progress = 0;
 
		for(var i = 0; i < event.data; i++){
			if (i%procent == 0)
				postMessage(progress += 10); //Возвращаем значения
		}
 
 
};
 
Данный код представляет псевдо загрузку. Вы можете использовать любой код, а точнее необходимый именно Вам.
Больше ничего не требуется. Весь функционал progressBar`а с помощью Web Workers API готов.
Добавлю в конце, для проверки поддержки технологии Web Workers API, вы можете использовать данный код:
if (!!window.Worker)
{
Console.log("технология поддерживается");
}
 
 
 
Rate this item
(1 Vote)
Login to post comments