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

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

webfanat вконтакте webfanat youtube

Таймеры JavaScript

Таймеры  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 идентификатор нашего таймера.

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

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

Статьи

Комментарии

Внимание!!! Комментарий теперь перед публикацией проходит модерацию

Все комментарии отправлены на модерацию

Реклама

Запись экрана

Данное расширение позволяет записывать экран и выводит видео в формате webm