Оптимизация часов
 

Нагуглил скрипт простейших часиков, и попробовал оптимизировать. Но так как я с яваскриптом только знакомлюсь, боюсь как бы я наоборот его не раздул :D

Подскажите насколько правильно я сделал, и как ещё можно производительность поднять.

Вот то что скачал:

<p id="txt"></p>

function startTime()
{
var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
// add a zero in front of numbers<10
m=checkTime(m);
s=checkTime(s);
document.getElementById('txt').innerHTML=h+":"+m+":"+s;
t=setTimeout(function(){startTime()},500);
}

function checkTime(i)
{
if (i<10)
  {
  i="0" + i;
  }
return i;
}
startTime();

А вот так я его попробовал оптимизировать:

<b><span id="th"></span>:<span id="tm"></span>:<span id="ts"></span></b>

function simpleClock() {
		var today = new Date(),
			h = today.getHours(),
			m = today.getMinutes(),
			s = today.getSeconds(),
			th = document.getElementById('th'),
			tm = document.getElementById('tm'),
			ts = document.getElementById('ts');

		th.innerHTML = h;
		tm.innerHTML = checkTime(m);
		ts.innerHTML = checkTime(s);

		function checkTime(i) {
			(i > 9) || (i = '0' + i);
			return i;
		}

		function sec() {
			if (s < 9) {
				s++;
				ts.innerHTML = '0' + s;
			} else if (s < 59) {
				s++;
				ts.innerHTML = s;
			} else {
				clearInterval(t);
				simpleClock();
			}
		}
		t = setInterval(sec, 1000);
	}
	simpleClock();

Это конечно всё не в целях выиграть каплю процессорного времени, но в целях обучения.

window.my = { th:document.getElementById('th'),tm:document.getElementById('tm'),ts:document.getElementById('ts'), rem:1 }
window.my.si = setInterval( function() {
    var a, b=window.my, c, t = new Date();
    if(b.ts.innerHTML != (c=(a=t.getSeconds())<10?'0':'')+a)){
        b.ts.innerHTML = c;
        if((c == '00' || b.rem) && b.tm.innerHTML != (c=(a=t.getMinutes())<10?'0':'')+a)){
            b.tm.innerHTML = c;
            if((c == '00' || b.rem) && b.th.innerHTML != (c=(a=t.getHours())<10?'0':'')+a)){
                b.th.innerHTML = c;
                b.rem=0;
            }
        }
    }
},  200);

интервал 200, чтоб не была заметна неравномерность между секундами

Спасибо, очень интересный способ, особенно то место с тернарным оператором. Только мне кажется он более прожорлив по ресурсам, каждые 200мс столько присвоений, сравнений, чтение тега... хотя конечно если нужна точность, тогда он лучше.

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

Кстати вы забыли открывающею скобочку после "!= (c=", без неё не работало. И нолик к часам не обязательно рисовать.

ну извиняюсь, писал по быстрому, на роботоспособность не проверял
ну да,точно
оптимизируйте! Например, добавьте в window.my свойство sec и начните сравнение так:

if(b.sec != t.getSeconds()){
    b.ts.innerHTML = ((b.sec=t.getSeconds())<10?'0':'')+b.sec;

Както оптимизировал вызываемые фунции setInterval-ом и setTimeout-ом для анимации. Safari вообще со временем не дружит, может интервал в 10 - 15 мс и до 100 мс растянуть (хотя может ему собственная нагрузка при перерисовке мешала, точно не помню, но в других браузерах такого не наблюдал), а FireFox меня убил, вызов пустой функции с интервалом 20 - 30 мс нагружал процессор на 10 -15 процентов, тогда как в других браузерах эти же функции заполненные кодом (а у меня там было его просто куча, я только в них те части отключил, которые вызывали перерисовку контента) и с тем же интервалом нагружали комп ВСЕГО НА ПАРУ процентов. Видать в FF реализация интервала на бесконечной интерации типа for( i=0; 1; ){if(хватит мозги ...) break;} Так я и не нашёл как от этого отделаться, может кто что знает? :-E

requestAnimationFrame

Нужно помнить, что это работает только в активной вкладке.

а кто сказал, что по rAM нужно определять текущее время ?

только отрисовывать, конечно