I have a component that gets makes an API call when the component mounts and gets a time in seconds (example: 2313). It is the only API call made so I want to take those seconds and convert it to a HH:MM:SS time and count up each second. I assume I'll need to make a method that takes the seconds when the data comes in but I don't know what to do from that points.
mounted() {
axios.get('')
.then(response => {
this.seconds = response.timeInSeconds;
})
},
data: {
return() {
seconds: null,
}
},
watch: {
seconds(newVal) {
if (newVal != null) {
// ????
}
}
}
You will need to do a couple of things.
Firstly, you will need to use SetTimeout function to run every second, and when it runs it just increments your this.seconds property. This timeout function should be set in your ajax response, and it should call itself so it runs again. Thinking more about it, you are probably better to just use the current datetime value and calculate the difference as running the timeout function may get out of time, depends how long it will run for. Whereas taking the difference from the current time and the time it ran will let you know how many seconds to add, and it will be in perfect sync with the clock.
Secondly, you will need a computed function to take those seconds and convert it to HH:MM:SS. There are libraries for this, but you can just use a combination of modulus and remainder to calculate the hours and minutes. 3600 seconds in an hour (60*60) etc.
Related
I'm using a library called CCapture to capture equally time-spaced frames. This code seems to be able to hook the clock and control it so that is slows down my rendering loop when it is capturing. My code uses clock.getDelta() to get the time and it uses this time to calculate the positions of moving transit vehicles. When CCapture controls the rendering rate, the vehicles are correctly positioned.
I recently started using the TWEEN library in my code.
function animate() {
renderer.setAnimationLoop( renderFrame );
}
function renderFrame() {
const delta = clock.getDelta()
timeSinceStart += delta;
repositionTransitVehicles(timeSinceStart);
renderer.render(scene, camera);
if (capturer) {
capturer.capture( renderer.domElement );
}
orbitControls.enabled = false;
TWEEN.update();
orbitControls.enabled = true;
orbitControls.update();
},
With the no-arguments version of TWEEN.update(), tweening works but always proceeds at real time, which is too fast when I'm using CCapture. If I use...
TWEEN.update(timeSinceStart)
...then tweening does not work at all.
Does anyone know the secret to making TWEEN.update() operate using the same clock as the rest of the model?
The timer that TWEEN uses is a millisecond timer, an thus the units of the time that need to be passed into TWEEN.update() need to be in units of milliseconds. The units of THREE.Clock() are seconds. So use...
TWEEN.update(timeSinceStart*1000)
Wherever you use TWEEN's .start() method to initiate your tweens, you will also need to pass in the argument timeSinceStart*1000 as well.
For example, if I trigger onDidChangeTextDocument events consecutively, with an interval of at maximum 1 second, then I would like to avoid this event's associated logic.
However, if 1 second has passed since the lastest onDidChangeTextDocument has been triggered, I would like for it to proceed with its logic.
This approach is known as "coalescing events". A typical approach is to start a timer when an event appears with the required interval. Every new event restarts the timer, so it never triggers unless there are no new events within the timer value. The triggered timer then calls any further code, handling the coalesced events. This might cause some problems if you have to process all data sent by each event. In that case you have to collect that data on each invocation of your event handler.
Here's code to handle changes per file in a VS Code extension:
private changeTimers = new Map<string, ReturnType<typeof setTimeout>>(); // Keyed by file name.
workspace.onDidChangeTextDocument((event: TextDocumentChangeEvent) => {
if (event.contentChanges.length > 0) {
const fileName = event.document.fileName;
const timer = this.changeTimers.get(fileName);
if (timer) {
clearTimeout(timer);
}
this.changeTimers.set(fileName, setTimeout(() => {
this.changeTimers.delete(fileName);
... your processing here
}, 1000));
}
});
I faced a problem while trying to calculate between 2 different times.
I am using vue-moment, and i tried to calculate the time with diffs but with no success.
data() {
return {
date: moment('12-11-2019').format("DD-MM-YYYY"),
date2: moment('13-11-2019').format("DD-MM-YYYY"),
startTime: this.date.diff(this.date2)
what is the right way of using moment in data and methods?
P.S.
i want to calculate the hours also and parse it with the date in the same argument, but i couldnt do it right.
You should be able to make it work with a computed property no problem:
computed: {
startTime() {
return this.date.diff(this.date2);
}
}
Working example
I got a countdown in VueJS and MomentJS using diff and duration methods from Moment.
I would like to detect when duration is 0 so I can clear the Interval of 1s.
Any way to do it? This is some part in my current code where I have the setInterval.
mounted: function () {
this.date = this.$moment(this.date).utcOffset('-0300')
this.difference = this.date.diff(this.today)
this.duration = this.$moment.duration(this.difference)
var timer = setInterval(function () {
this.duration = this.duration.subtract(1, 'seconds')
if (/* validation if duration has ended */) {
clearInterval(timer)
}
}.bind(this), 1000)
I get I could validate each days(), hours(), minutes() and seconds() to be equal to 0 but it feels quite dirty to do such thing, I was wondering if there's any better way to validate this.
Also, isn't MomentJS months starting at index 0 so it goes from 0 to 11? Right now it's working from 1 to 12. I don't understand why.
Any help will be appreciated.
So in Worklight, using JSONStore I want to initialize a collection the first time the app is ever loaded.
I want to fill it with a 'status' field with 36 instances of it. On the very first time the app is loaded I want to make all of these set to 0.
After this first initialization the app will update the status values from time to time based on user actions...
How do I initialize all the values at zero just the first time, and not again after that.
Thanks!
(and sorry if this question makes no sense..)
There's a count API you can use to get the number of documents in the collection. If that number is 0, it means it's the first time the collection was initialized, so you can add your 36 instances with status 0 there. For example:
WL.JSONStore.init(...)
.then(function () {
return WL.JSONStore.get('collection').count();
})
.then(function (numOfDocsInCollection) {
if (numOfDocsInCollection < 1) {
//this code will be reached only the first time the collection has been initialized
} else {
//this code will be reached every other time
}
});