jQuery animate step function обновляет дату и время со смещением / задержкой - PullRequest
Новая
       38

jQuery animate step function обновляет дату и время со смещением / задержкой

0 голосов
/ 10 октября 2019

У меня есть временная шкала и линия, которая указывает, как проходит время. Я использую jQuery animate, чтобы перемещать линию по экрану в течение определенного периода времени. Я хочу показать текстовое поле, в котором дата и время отображаются с течением времени, но дата и время указываются при запуске анимации и не являются текущей датой пользователя - это дата с устройства IOT.

Если я сделаю следующий код, мое datetime отобразится, как и ожидалось - но, как уже упоминалось, я не хочу использовать текущее datetime пользователя - мне нужно использовать datetime с устройства IOT. 

var mydate = new Date();
$(".line")
    .animate({
        "left": "100000px"
    }, {
        progress: function(obj, num, remain) {
            mydate = new Date();
            updateDatum(mydate);
        },
        duration: 24 * 60 * 60 * 1000, // 24 hours * 60 minutes * 60 seconds * 1000 milliseconds
        easing: 'linear'
    });

function updateDatum(date) {
    $rootScope.nou = date.getHours() + ":" + ((date.getMinutes() < 10 ? '0' : '') + date.getMinutes()) + ":" + ((date.getSeconds() < 10 ? '0' : '') + date.getSeconds()) + ":" + ((date.getMilliseconds() < 10 ? '0' : '') + date.getMilliseconds());
    $rootScope.$applyAsync();
}

Если я сделаю блок кода ниже, у моего datetime будет смещение на неопределенное количество миллисекунд (значение смещения меняется каждый раз). Мой вывод заключается в том, что вычисление новой даты и времени занимает больше времени, чем анимация, поэтому происходит смещение. 

var mydate = dateFromIotDevice;
$(".line")
    .animate({
        "left": "100000px"
    }, {
        progress: function(obj, num, remain) {
            mydate = new Date((new Date(mydate)).setMilliseconds((new Date(mydate)).getMilliseconds() + 10));
            updateDate(mydate);
        },
        duration: 24 * 60 * 60 * 1000, // 24 hours * 60 minutes * 60 seconds * 1000 milliseconds
        easing: 'linear'
    });

function updateDate(date) {
    $rootScope.now = date.getHours() + ":" + ((date.getMinutes() < 10 ? '0' : '') + date.getMinutes()) + ":" + ((date.getSeconds() < 10 ? '0' : '') + date.getSeconds()) + ":" + ((date.getMilliseconds() < 10 ? '0' : '') + date.getMilliseconds());
    $rootScope.$applyAsync();
}

См. Разницу / смещение между тем, когда был выполнен console.log, и датой и временем после добавленных миллисекунд.

Как мне обновить дату и время по прошествии времени - точнобез смещения / задержки?

...