JavaScript: надежен ли этот таймер? - PullRequest
Новая
       14

JavaScript: надежен ли этот таймер?

4 голосов
/ 01 декабря 2011

Сегодня я познакомился с миром веб-работников на JavaScript.Это заставило меня задуматься о таймерах.Я привык программировать таймеры так, как это.

var time = -1;
function timerTick()
{
    time++;
    setTimeout("timerTick()",1000);
    $("#timeI").html(time);
}

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

Теперь я разработал метод с использованием Web Workers, сделал небольшой тест и нашел его гораздо более надежным.Поскольку я не являюсь экспертом по JavaScript, я хотел бы знать заранее, работает ли эта функция корректно или какие проблемы могут возникнуть, заранее.

Мой код JavaScript (обратите внимание, я использую JQuery): 

$(function() {
    //-- Timer using web worker. 
    var worker = new Worker('scripts/task.js'); //External script
    worker.onmessage = function(event) {    //Method called by external script
        $("#timeR").html(event.data)
    };
};

Внешний скрипт ('scripts / task.js'): 

var time = -1;
function timerTick()
{
    time++;
    setTimeout("timerTick()",1000);
    postMessage(time);
}
timerTick();

Вы можететакже посмотрите живую демонстрацию на моем сайте .

Ответы [ 2 ]

10 голосов
/ 01 декабря 2011

Если вы пытаетесь надежно отображать количество секунд, то ЕДИНСТВЕННЫЙ надежный способ сделать это - получить текущее время при запуске и использовать ТОЛЬКО таймер для обновления экрана.На каждом тике вы получаете текущее время, вычисляете фактические прошедшие секунды и отображаете его.Ни setTimeout(), ни setInterval() не гарантируются и не могут использоваться для точного подсчета времени.

Вы можете сделать это следующим образом: 

var start = +(new Date);
setInterval(function() {
    var now = +(new Date);
    document.getElementById("time").innerHTML = Math.round((now - start)/1000);
}, 1000);

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

Вы можете увидеть эту работу здесь: http://jsfiddle.net/jfriend00/Gfwze/

0 голосов
/ 01 декабря 2011

Наиболее точным таймером будет сравнение двух меток времени. Вы можете повысить точность своего таймера, обновляя его чаще (например, каждые 100 мс). Я предпочитаю использовать setInterval() вместо setTimeout().

...