JavaScript Урок 32 Таймер. Временные События
1
2
3
4
5
6
7
8
9
10
11
12
|
|
|
JavaScript может выполняться через определенные промежутки времени.
Такие скрипты называют временными событиями. (Ударение в слове "временные" здесь на предпоследний слог, т.е. события, распределенные во времени или приуроченные к определенному времени)
|
JavaScript Временные События
С помощью JavaScript можно выполнять некоторый код через определенные интервалы времени. Такие скрипты называют временными событиями.
Очень легко организовать временные события, используя JavaScript. Два ключевых метода, которые используются - это:
- setTimeout() - выполняет код через некоторое время в будущем
- clearTimeout() - отменяет выполнение кода, установленного с помощью setTimeout()
Замечание: Оба метода setTimeout() и clearTimeout() являются методами оконного объекта HTML DOM.
Метод setTimeout()
Синтаксис
| var t=setTimeout("предложение javascript",миллисекунды); |
Метод setTimeout() возвращает значение. В синтаксисе, определенном выше, значение сохраняется в переменной t. Если вы хотите отменить функцию setTimeout(), вы можете ссылаться на нее, используя имя переменной.
Первый параметр setTimeout() может быть строкой исполняемого кода, или вызовом функции.
Второй параметр указывает интервал времени, спустя который необходимо выполнить код.
Замечание: В одной секунде 1000 миллисекунд.
Пример
При нажатии на кнопку в примере ниже, сигнальное окно выскочит через 3 секунды.
Пример
<html>
<head>
<script type="text/javascript">
function timeMsg()
{
var t=setTimeout("alertMsg()",3000);
}
function alertMsg()
{
}
</script>
</head>
<body>
<form>
</form>
</body>
</html>
|
Попробуйте сами »
Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает
|
Пример - Бесконечный Цикл
Чтобы заставить таймер работать в бесконечном цикле, мы должны написать функцию, которая вызывает сама себя.
В примере ниже, при нажатии на кнопку, поле ввода начнет отсчет (до бесконечности), начиная с нуля.
Заметьте, что мы также определяем функцию, которая проверяет, не запущен ли таймер уже, чтобы избежать создание дополнительных таймеров, если кнопка нажимается несколько раз:
Пример
<html>
<head>
<script type="text/javascript">
var c=0;
var t;
var timer_is_on=0;
function timedCount()
{
document.getElementById('txt').value=c;
c=c+1;
t=setTimeout("timedCount()",1000);
}
function doTimer()
{
if (!timer_is_on)
{
timer_is_on=1;
timedCount();
}
}
</script>
</head>
<body>
<form>
<input type="text" id="txt">
</form>
</body>
</html>
|
Попробуйте сами »
Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает
|
Метод clearTimeout()
Синтаксис
| clearTimeout(setTimeout_идентификатор) |
Пример
Пример ниже такой же, как и пример с "Бесконечным Циклом" выше. Разница только в том, что в этом примере мы добавляем кнопку "Прекратить отсчет!", которая останавливает таймер:
Пример
<html>
<head>
<script type="text/javascript">
var c=0;
var t;
var timer_is_on=0;
function timedCount()
{
document.getElementById('txt').value=c;
c=c+1;
t=setTimeout("timedCount()",1000);
}
function doTimer()
{
if (!timer_is_on)
{
timer_is_on=1;
timedCount();
}
}
function stopCount()
{
clearTimeout(t);
timer_is_on=0;
}
</script>
</head>
<body>
<form>
<input type="text" id="txt" />
</form>
<p>
</p>
</body>
</html>
|
Попробуйте сами »
Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает
|
 |
Еще примеры
|
Еще один простой счетчик
Часы, созданные с помощью временного события
|
