Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 26.10.2019, 12:56
Аватар для VirtualGuys
Новичок на форуме
Отправить личное сообщение для VirtualGuys Посмотреть профиль Найти все сообщения от VirtualGuys
 
Регистрация: 26.10.2019
Сообщений: 1

Возможно ли оптимизировать этот кусок кода, для увеличения производительности сайта?
Добрый день! Я только недавно начал писать на JavaScript, и пытался написать для своего сайта часы, чтобы человек мог в любое время посмотреть время. Но столкнулся с такой проблемой, что часы нужно обновлять каждую 1 - 1.5 секунд, чтобы постоянно ставить нужное время, и в итоге на сайте очень низкая производительность, и даже другие сайты начинают лагать из-за этого. А если я поставлю обновление раз в минуту, то тогда часы будут неправильно обновляться. Например человек зайдёт на сайт в 12 минут 30 секунд, и часы обновятся не в 13 минут 0 секунд, а в 13 минут 30 секунд. Как можно оптимизировать это, и возможно ли это вообще?
Это код на часы:
function watch() {
          var time = new Date();
          var h = time.getHours();
          var m = time.getMinutes();
          var text = document.createTextNode("0:00");
          var b = document.createElement("p");
          b.appendChild(text);
          b.setAttribute("id", "clock");
          var parent = document.getElementById("maind"); //Это div
          var child = document.getElementById("clock"); //Это текст для часов
          parent.replaceChild(b, child);
         if(m>=10) {
           text.nodeValue = h + ":" + m;
        }
        if(m<10) {
           text.nodeValue = h + ":" + "0" + m; //Чтобы показывало не 8:2, а 8:02
         }
        }
        setInterval(watch, 1500);

У меня есть идея, как-то отключать этот код пока человек не на сайте, тогда хотя бы не лагали бы другие сайты. Но как? Заранее спасибо!
Ответить с цитированием
  #2 (permalink)  
Старый 26.10.2019, 14:38
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

VirtualGuys,
1. оставить в функции только вывод, остальное вынести за функцию.
Ответить с цитированием
  #3 (permalink)  
Старый 26.10.2019, 14:38
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от VirtualGuys
очень низкая производительность,
врятли из-за этого скрипта
Ответить с цитированием
  #4 (permalink)  
Старый 26.10.2019, 15:08
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

DateTimeFormat
VirtualGuys,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>

  <script>
    const intl = new Intl.DateTimeFormat("ru", {
        hour: "2-digit",
        minute: "2-digit"
    });
    const timeEveryOneMinute = () => {
	const data = new Date(),
	time = intl.format(data);
	maind.innerHTML = `Текущее время: ${time}`;
	setTimeout(timeEveryOneMinute, 1000 * 60);
    }
   addEventListener('DOMContentLoaded', timeEveryOneMinute);
  </script>
</head>

<body>
<div id="maind"></div>

</body>
</html>
Ответить с цитированием
  #5 (permalink)  
Старый 26.10.2019, 19:26
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Сообщение от VirtualGuys
А если я поставлю обновление раз в минуту, то тогда часы будут неправильно обновляться. Например человек зайдёт на сайт в 12 минут 30 секунд, и часы обновятся не в 13 минут 0 секунд, а в 13 минут 30 секунд. Как можно оптимизировать это, и возможно ли это вообще?
VirtualGuys, можно так...
<div id="maind"></div>
<script>
	const dateTimeFormatOptions = {
		hour: "2-digit",
		minute: "2-digit"
	};
	(function tick () {
		const time = new Date().toLocaleTimeString("ru", dateTimeFormatOptions)
		maind.textContent = `Текущее время: ${time}`
		setTimeout(tick, 1000)
	})()
</script>
Ответить с цитированием
  #6 (permalink)  
Старый 26.10.2019, 21:23
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,480

На всякий случай: Intl на старых яблоках(ios9) не работает. Не то чтобы это было важно, но имелся печальный опыт.=\
__________________
29375, 35
Ответить с цитированием
  #7 (permalink)  
Старый 26.10.2019, 21:56
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Aetae, для этого есть https://polyfill.io/v3/url-builder/
Ответить с цитированием
  #8 (permalink)  
Старый 27.10.2019, 06:21
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,480

Malleys, да ясенхрен, но кто же знал то?
__________________
29375, 35
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Правильно вызвать массив biryukovm Элементы интерфейса 3 19.03.2018 13:31
Скрипт корзины для сайта EasyNetShop.ru Ваши сайты и скрипты 0 17.11.2016 14:57
поиск классов внутри тега yozuul jQuery 24 14.06.2013 22:00
Новая система управления сайтом Scripto CMS deepslam Ваши сайты и скрипты 38 31.01.2011 14:55