3

Использую вот такой таймер с автокоррекцией, костылями сделал из него обратный таймер (вывод в консоль идет в обратном порядке)

function toFixed(num, fixed) {
       return (Math.floor(num * Math.pow(10, fixed)) / Math.pow(10, fixed)).toFixed(fixed);
    }
	
    function timerback(time_f) {
		
        var timeout;
        var speed = 50;
        var finish = (time_f * 1000) / 50;
        var counter = 0;
        var start = new Date().getTime();

        function instance() {
            var real = (counter * speed);
            var ideal = (new Date().getTime() - start);

            counter++;
            var diff = (ideal - real);

            console.log(toFixed(time_f - toFixed(ideal / 1000.0, 2),2));

            if (counter - 1 != finish) {

                timeout = setTimeout(function() {
                    instance();
                }, Math.max((speed - diff),0));

            } else {	 
				
                clearTimeout(timeout);
                console.log('TIMER FINISH');
            }
        };

        timeout = setTimeout(function() {
            instance();
        }, speed);
    }
    
    timerback(5);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Вызов этой функции происходит вот так timerback(5) 5 - секунд будет ждать таймер. Функция вызывается по суте бесконечно с периодом в 10-15 секунд (такая концепция проекта)

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

Вот эта библиотека ничем не помогает https://github.com/turuslan/HackTimer

Как сделать чтобы таймер работал одинаково хорошо вне зависимости от активности вкладки в браузере ?

Из библиотек использую

jquery-3.2.1.min.js
jquery.easing.1.3.js
socket.io.js
accounting.min.js
tinysort.min.js
materialize.min.js
jquery.cookie-1.4.1.min.js
bootstrap.min.js
9
  • Какая исходная задача решается? 5 дек 2017 в 13:39
  • Просто клиенту с периодом в 10-15 секунд надо показать таймер обратного отсчета допустим 20ти секунд. 1) Клиент зашел на сайт 2) Запустился таймер обратного отсчета 20 секунд 3) Таймер завершен 4) Выполняются какие-то действия примерно в течении 10-15 секунд 5) Запустился таймер обратного отчета 20 секунд .......
    – Pulanding
    5 дек 2017 в 13:41
  • Зачем вы придумываете велосипед? Тамер задаётся аналогично функцией window.setInterval погуглите её почитайте описание.
    – nick_n_a
    5 дек 2017 в 13:49
  • Велосипед я изобрел, потому что setInterval выполняется неверно, он не учитывает время которое уходит на выполнение callback функции. Статья habrahabr.ru/post/212889
    – Pulanding
    5 дек 2017 в 13:51
  • Тогда синхнонизируйтесь в таймере с ф-цией new Date() на интервал пол-секунды-секунда. А время выполнения и правда сложно спрогнозировать.
    – nick_n_a
    5 дек 2017 в 13:52

1 ответ 1

2

Таймеры в JS работают крайне нестабильно. Я бы рекомендовал Вам запоминать начальное время, а потом вызвать setInterval с небольшим дискретом. И в ней проверять прошло ли с момента старта достаточно времени

С учетом уточнения

Пользователь должен видеть обратный отсчет 20-ти секунд включая сотые доли секунды например 19.29 (19 секунд | 290 миллисекунд)

var startTime = new Date();
setInterval(function() {
  var curTime = new Date();
  var delta = curTime.getTime() - startTime.getTime();
  if (delta > 20000) {
    console.log('20 seconds expired');
    startTime = new Date();
  } else
    document.getElementById('time').innerText = (20 - delta / 1000).toFixed(2);
}, 50);
<div id="time"></div>

12
  • Я не понимаю как я не так объясняю, код таймера и подходы могут быть любыми, но если вкладка в браузере НЕ АКТИВНА, то сам браузер устанавливает минимальный интервал в 1000 мс, а мой таймер должен работать каждые 50 мс внутри себя чтобы сообщать пользователю, сколько осталось до конца таймера
    – Pulanding
    5 дек 2017 в 14:01
  • @LorDo 1. Кому он будет сообщать, если вкладка неактивна? 2. Какой пользователь в состоянии увидеть картинку, изменяющуюся каждые 50 мс? 5 дек 2017 в 14:10
  • 1) Никому, воздуху. 2) Я добавил выполнении кода в шапке вопроса, там в консоль будут выводится текущие значение. Так вот если вывод не в консоль а в любой div элемент. Вы не различите цифр ?
    – Pulanding
    5 дек 2017 в 14:12
  • Вы можете увидеть проблему таким образом, нажмите выполнение кода в шапке вопроса и он отработает отлично 5 секунд, затем нажмите кнопку выполнения кода в шапке и переключитесь на другую вкладку в браузере и подождите 5-6 секунд для верности, вернувшись вы обнаруживаете отрицательные значения.
    – Pulanding
    5 дек 2017 в 14:28
  • @LorDo Каждые 50 мс? Нет. 5 дек 2017 в 14:29

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.