Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 25.10.2012, 14:18
Интересующийся
Отправить личное сообщение для Blanco Посмотреть профиль Найти все сообщения от Blanco
 
Регистрация: 20.10.2012
Сообщений: 16

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

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

Вот то что скачал:
<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();


Это конечно всё не в целях выиграть каплю процессорного времени, но в целях обучения.
Ответить с цитированием
  #2 (permalink)  
Старый 26.10.2012, 01:40
Интересующийся
Отправить личное сообщение для K313 Посмотреть профиль Найти все сообщения от K313
 
Регистрация: 05.03.2012
Сообщений: 11

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, чтоб не была заметна неравномерность между секундами

Последний раз редактировалось K313, 26.10.2012 в 01:52.
Ответить с цитированием
  #3 (permalink)  
Старый 26.10.2012, 16:42
Интересующийся
Отправить личное сообщение для Blanco Посмотреть профиль Найти все сообщения от Blanco
 
Регистрация: 20.10.2012
Сообщений: 16

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

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

Кстати вы забыли открывающею скобочку после "!= (c=", без неё не работало. И нолик к часам не обязательно рисовать.
Ответить с цитированием
  #4 (permalink)  
Старый 26.10.2012, 21:32
Интересующийся
Отправить личное сообщение для K313 Посмотреть профиль Найти все сообщения от K313
 
Регистрация: 05.03.2012
Сообщений: 11

Цитата:
Кстати вы забыли открывающею скобочку после "!= (c=", без неё не работало
ну извиняюсь, писал по быстрому, на роботоспособность не проверял
Цитата:
И нолик к часам не обязательно рисовать
ну да,точно
Цитата:
Только мне кажется он более прожорлив по ресурсам, каждые 200мс столько присвоений, сравнений, чтение тега...
оптимизируйте! Например, добавьте в 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;} Так я и не нашёл как от этого отделаться, может кто что знает?
Ответить с цитированием
  #5 (permalink)  
Старый 26.10.2012, 21:56
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

Сообщение от K313
Так я и не нашёл как от этого отделаться, может кто что знает?
requestAnimationFrame
Ответить с цитированием
  #6 (permalink)  
Старый 29.10.2012, 13:56
Аватар для B~Vladi
Модератор Всея Форума
Отправить личное сообщение для B~Vladi Посмотреть профиль Найти все сообщения от B~Vladi
 
Регистрация: 14.05.2009
Сообщений: 4,021

Сообщение от melky
requestAnimationFrame
Нужно помнить, что это работает только в активной вкладке.
__________________
Болтовня ничего не стоит. Покажите мне код. — Linus Torvalds
влад.куркин.рф
Ответить с цитированием
  #7 (permalink)  
Старый 29.10.2012, 14:50
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

Сообщение от B~Vladi Посмотреть сообщение
Нужно помнить, что это работает только в активной вкладке.
а кто сказал, что по rAM нужно определять текущее время ?

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Оптимизация большого приложения danik.js Общие вопросы Javascript 9 03.07.2012 19:30
Оптимизация кода (создание горизонтального меню) IONEX jQuery 0 16.01.2012 05:07
Оптимизация работы галереи RaskolnikOFF Ваши сайты и скрипты 19 06.10.2010 20:41
Как рассчитать дату и время по количеству дней и часов skalka Общие вопросы Javascript 4 01.10.2010 09:21
Оптимизация кода. Правила хорошего тона при написании скриптов [ANTI]CheateR jQuery 1 18.09.2010 08:41