Далее на странице...
Метод setTimeout принимает два обязательных параметра и выполняет какой-либо код через заданный промежуток времени.
1-ый параметр - это код.
2-ой параметр - время в миллисекундах.
setTimeout(код,5000);
Здесь для метода setTimeout задан промежуток времени 5000 миллисекунд. То есть определенный код выполниться через 5 секунд.
Метод setTimeout - 2 параметра
<!-- 1. Здесь первым параметром метода setTimeout является код -->
<body>
<script type="text/javascript">
document.write("Ждите 5 секунд...");
setTimeout('document.write("Вы прождали 5000 миллисекунд")',5000)
</script>
</body>
<!-- 2. А здесь в качестве первого параметра метода setTimeout выступает функция -->
<body>
<script type="text/javascript">
document.write("Ждите 5 секунд...");
function time(){
document.write("Вы прождали 5000 миллисекунд");
}
setTimeout(time,5000)
</script>
</body>
Обратите внимание, что оба фрагмента кода из примера приводят к одному результату.
Но нам интересен третий параметр метода setTimeout. Об этом далее.
Метод setTimeout - 3 параметра - Последовательность событий
Рассмотрим ситуацию, где метод setTimeout имеет три параметра.
Для этого продолжим работать с примером из предыдущей заметки и для начала напомним условие поставленной там задачи:
На странице было ТРИ полупрозрачных изображения.
Создавался ОДИН обработчик событий для всех изображений, с помощью которого:
- при щелчке на ЛЮБОМ из изображений левой кнопкой мыши оно становилось полноценным.
Дополним условие:
Нужно сделать так, чтобы изображение, по которому щелкнули мышью, и которое в результате стало полноценным, через заданный промежуток времени возвращалось к исходному состоянию, т.е. снова становилось полупрозрачным.
Как раз здесь и пригодится третий параметр метода setTimeout.
<script type="text/javascript">
window.onload = back_gr;
function back_gr(){
var images = document.getElementsByTagName('img'); /* Объект images содержит все изображения и работает как массив */
for(i = 0; i < images.length; i++){
images[i].onclick = change; /* Назначаем все изображениям один обработчик */
}
}
function change(eventObj){
var images = eventObj.target; /* Cообщаем, какой элемент, т.е. какое изображение сгенерировало событие */
images.src = "img/peng_" + images.id + ".gif" /* Меняем src изображения */
setTimeout(re_blur, 2000, images); /* Через 2 сек. вызываем функцию re_blur, которой в качестве параметра передаем изображение, которое сгенерировало событие */
}
function re_blur(images){
images.src = "img/peng_" + images.id + "_blur.gif" /* Снова меняем src изображения */
}
</script>
<body>
<img src="img/peng_96_blur.gif" id='96'>
<img src="img/peng_64_blur.gif" id='64'>
<img src="img/peng_32_blur.gif" id='32'>
</body>
Итак, здесь метод setTimeout имеет три параметра. Как это работает?
-
Третьим параметром метода setTimeout является images. Эта переменная является объектом, который заключает в себе изображение, которое сгенерировало событие. То есть то, по которому щелкнули левой кнопкой мыши.
- Напомним, что благодаря щелчку это изображение стало полноценным.
-
В методе setTimeout первым параметром является функция-обработчик re_blur, которая срабатывает через 2000 миллисекунд (две секунды), и которой передается аргумент images
-
Уже в самой функции re_blur через параметр images для нужного изображения мы снова меняем атрибут src. Изображение снова становиться полупрозрачным, т.е. возвращается к исходному состоянию.
Следует обратить внимание
Вернемся к рассмотренному выше примеру с методом setTimeout. Обратите внимание на следующие элементы кода:
images из функции back_gr(),
images из функции change() и
images из функции re_blur().
Что если использовать для них различные имена? images, imag и im.
Смотрим пример ниже.
<script type="text/javascript">
window.onload = back_gr;
function back_gr(){
var images = document.getElementsByTagName('img');
for(i = 0; i < images.length; i++){
images[i].onclick = change;
}
}
function change(eventObj){
var imag = eventObj.target;
imag.src = "img/peng_" + imag.id + ".gif"
setTimeout(re_blur, 2000, imag);
}
function re_blur(im){
im.src = "img/peng_" + im.id + "_blur.gif"
}
</script>
<body>
<img src="img/peng_96_blur.gif" id='96'>
<img src="img/peng_64_blur.gif" id='64'>
<img src="img/peng_32_blur.gif" id='32'>
</body>
Осмыслите этот момент самостоятельно.
