Пауза на Javascript?

Классического оператора pause или delay в классическом JavaScript нет. Конечно, можно попытаться его "эмулировать" с помощью обработки системного времени:

<script type="text/javascript">
 function pause (ms) {
  if (ms<=0) return;
  var now = new Date();
  now.setTime (now.getTime()+ms);
  var end=now.getTime();
  do {
   now = new Date();
  } while (now.getTime()<end);
 }

 function test () {
  var ms=parseInt(document.form_pause.ms.value);
  if (isNaN(ms) || ms<=0) {
   document.getElementById('res_pause').innerHTML = 'Введите натуральное число миллисекунд';
   return;
  }
  document.getElementById('res_pause').innerHTML = 'Начало паузы '+ms+' мс...';
  pause (ms); //Это не работает; сообщение "Начало паузы" "висеть" не будет
  document.getElementById('res_pause').innerHTML = 'Выполнено';
 }
</script>
<noscript>
 <div align="center">Извините, для работы нужен включённый Javascript</div>
</noscript>

Увы, этот, казалось бы, естественный код, к успеху не приведёт - сообщения о начале паузы мы не увидим ни в одном бразуере, хотя скрипт и "затормозит" на выбранное время, сделав, в том числе, недоступными кнопку и поле ввода:

 Выполнить неправильный пример в текущей вкладке (1 Кб)

(чтобы понять, в чём суть дела, введите число побольше, вроде 3000 или 5000, и попробуйте пощелкать в это время по элементам окна)

Дело в том, что выполнение на Javascript - однопоточное. страница блокируется полностью. Поэтому попробуем по-другому, используя возможности стандартного метода setTimeout:

<script type="text/javascript">
 var id;

 function after_function() {
  window.clearTimeout (id);
  document.getElementById('res_pause').innerHTML = 'Выполнено';
  //Здесь поместите свой код
 }

 function test () {
  var ms=parseInt(document.form_pause.ms.value);
  if (isNaN(ms) || ms<=0) {
   document.getElementById('res_pause').innerHTML = 'Введите натуральное число миллисекунд';
   return;
  }
  document.getElementById('res_pause').innerHTML = 'Начало паузы '+ms+' мс...';
  id = window.setTimeout ("after_function()",ms);
 }
</script>
<noscript>
 <div align="center">Извините, для работы нужен включённый Javascript</div>
</noscript>

<div align="center">
<form name="form_pause">
Время остановки, мс: <input type="text" name="ms" size="5" maxlength="4"> 
<input type="button" value="Ввод" onClick="test()">
</form>
</div>
<div align="center" id="res_pause"></div>

 Выполнить правильный пример паузы в Javascript в текущей вкладке (1 Кб)

Этот вариант выполнится естественней - будут выведены сообщения о начале и конце паузы, а вместо комментария в тело метода after_function можно поместить свой код.

Следует только понимать, что метод setTimeout (как и setInterval) не нарушает и не останавливает обработку скрипта, то есть, код продолжает выполняться и после оператора

id = window.setTimeout ("after_function()",ms);

- просто у нас он последний в обработчике клика и делать скрипту больше нечего.

Иными словами, мы просто откладываем будущее событие на указанное время.

28.08.2014, 15:28 [12867 просмотров]