15 мая 2009 :Обратный отсчёт — setTimeout против setInterval.

Иногда нужно сделать яваскриптом обратный отсчёт. Например для того чтобы обновить страницу через N секунд и вывести таймер с кнопкой остановки. Реализуем это всеми способами.

В очень-очень старых браузерах типа NN4 это можно было сделать с помощью функции setTimeout, которая правда в NN4 вызывала переполнение стека, но это исправили. Реализовать это можно вот так:

<b id="testid">15</b> секунд.
<script type="text/javascript">
        if(typeof t == "undefined")var t=[];
        t["testid"]=setTimeout(\'page_refresh("testid","http://usabili.ru/");\',1000);
        function page_refresh(id,url){
                s=document.getElementById(id);
                if(s.innerHTML==0)document.location=url;
                s.innerHTML=s.innerHTML-1;
                else t[id]=setTimeout(\'page_refresh("\'+id+\'","\'+url+\'");\', 1000 );
        }
        document.write(\'<a href="#" onclick="clearTimeout(t[\\\'testid\\\']);">STOP</a>\');
</script>

Минус этой реализации в том что функция вызывает сама себя (рекурсия), по сути впадая в бесконечный цикл. Метод введённый в Javascript 1.3 setInterval позволяет сократить код минимум на строчку, и облегчить восприятие программы

<b id="testid">15</b> секунд.
<script type="text/javascript">
        if(typeof t == "undefined")var t=[];
        t["testid"]=setInterval(\'page_refresh("testid","http://usabili.ru/");\',1000);
        function page_refresh(id,url){
                s=document.getElementById(id);
                if(s.innerHTML==0)document.location=url;
                s.innerHTML=s.innerHTML-1;
        }
        document.write(\'<a href="#" onclick="clearInterval(t[\\\'testid\\\']);">STOP</a>\');
</script>

Разница между методами в том что setInterval - выполняет функцию многократно, а setTimeout - однократно. Если возможно - используйте второй способ, т.е. setInterval. Ссылку на отключение я внесла в тег скрипт потому что с выключенным яваскрипт она работать не будет. Поэтому можно дополнить наш скрипт такой хитростью:

<noscript>
        яваскрипт отключен, обновим через meta-тег.
        <meta http-equiv="refresh" content="15;url=http://usabili.ru/">
</noscript>

Тут конечно никак нельзя будет повлиять на отключение таймера, поэтому применять надо тогда когда важно чтобы редирект работал.

P.S. Вы конечно догадались чтоб проверка на наличие t не случайна. И не случайно это не одна переменная а целый массив. Для удобства использования разных таймеров наши технологи используют php-функцию со случайным testid. Которая вызывается так page_refresh($url,$time=0)
ID-таймера они генерят так:
        $mk=explode(' ',microtime());
        $rand='id_'.round(((float)$mk[0])*1000000);
Это позволяет использовать несколько управляемых таймеров редиректа (если таймеров много редиректит естественно тот кто сработает раньше).