Блог веб разработки

Блог веб-разработки статьи | видеообзоры | исходный код

Таймеры JavaScript

Всем привет! Рубрика данной темы таймеры в javaScript. В наше время пожалуй трудно представить сайты или сервисы которые не используют сценарии javaScript и одними из часто используемых приемов является циклическое повторение одного и того же действия через определенный промежуток времени. За данный прием отвечают так называемые таймеры.

Давайте познакомимся с ними поближе:

setTimeout(function(){
    document.write('Данный код будет выполнен через 1 секунду');
},1000);

первый аргументом является анонимная функция можно выполнить данный код вызывая определенную функцию:

function s1(){
        document.write('Данный код будет выполнен через 1 секунду');
    }
    setTimeout(s1,1000);

или прямо так:

setTimeout("document.write('Данный код будет выполнен через 1 секунду')",1000);

Особой разницы вы не увидите. Что вы должны знать про этот счетчик, да кстати как вы поняли он называется setTimeout.

Первое, он выполняется через указанный вами промежуток времени, а иммено за это отвечает второй параметр в нашем случае он равен 1000 милисекунд или одной секунде, то есть через это время будет выполняться наш код.

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

Бывает необходимо циклично выполнять код по нескольку раз. Мы можем решить эту проблему используя рекурсию.

Примерно так:

var mas = ['Данный код ',' выполняется уже ', '3 секунды'];
    function text(i = 0){

        setTimeout(function(){

            if(parseInt(i) < 3) {
                document.write(mas[i]);
                i++;
                text(i);
            }
        },1000);
    }
       text();

Кто не знает что такое рекурсия, то это когда функция вызывает саму себя . В нашем случае программа начинается с вызова функции text() затем в самой функции у нас запускается счетчик внутри которого проверяется условие , если условие удовлетворено у нас выполняется вывод элемента массива mas, i увеличивается на единицу и происходит вызов функции самой себя. Функция вызывает саму себя до тех пор пока условие if(parseInt(i) < 3) не вернет ложь.

Но что если нам понадобится выполнять определенные сценарии на протяжении всего сеанса.

Для этих задач существует счетчик setInterval, давайте рассмотрим его подробнее на примере:

<p>Вы не обновляли страницу  <span>0</span> сек.</p>
<script>
 var i = 0;
    var timerId = setInterval(function() {
        i++;
        document.querySelector('span').innerHTML = i;
    }, 1000);
</script>

как вы уже заметили данный счетчик выполняет код через заданный промежуток времени неограниченное количество раз.timerId - это идентификатор нашего счетчика с помощью его мы можем остановить таймер.

clearInterval(timerId);

после этой строчки кода таймер остановится, как видите мы передали методу clearInterval идентификатор нашего таймера.

На этом данная статья подошла к концу надеюсь я смог помочь вам в решении вопроса вопроса.Желаю вам успеха и удачи! Пока!

Оцените статью

Еще статьи

box-shadow css

строки javaScript

goto php

память выделяемая php

screen javascript

quotes css

css zoom

Комментарии

Проверочный код

В данном разделе пока нет комментариев!

История

    ПОДПИСКА

    • Подпишись и получай информацию о выходе новых статей на почту! Просто введите свою почту, нажмите кнопку подписаться. На почту должно будет прийти сообщение с потверждением подписки. Если сообщение не пришло проверьте раздел спам или попробуйте другую почту. Также по всем техническим проблемам вы можете написать в поддержку

    НОВОСТИ

    • Всем привет! Запустил новый сервис для поиска и бесплатного скачивания, прослушивания аудиокниг. Здесь вы можете найти множество литературы и прослушать ее. Вскоре возобновлю написание статей.