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.
Related
Need a help here for geolocation API - even after using Titanium.Geolocation.distanceFilter = 10; 10 in meter callback function is getting triggered randomly without moving here and there. Any idea what is wrong here ?
function Geolocate() {
var self = this;
// The callback function we should call when location is finally determined
this.locationReceivedCallback = function () {};
// Check if location event is already triggered or not
this.isLocationEventRegister = false;
// The function that unregisters the location event
this.unregisterLocationEvent = function () {
this.isLocationEventRegister = false;
Ti.Geolocation.removeEventListener('location', self.locationReceivedCallback);
};
}
Geolocate.prototype.init = function () {
// Setting up some preference values
Titanium.Geolocation.distanceFilter = 10; //The minimum change of position (in meters) before a 'location' event is fired.
if (deviceDetect.isIos()) {
Titanium.Geolocation.accuracy = Titanium.Geolocation.ACCURACY_BEST; // Using this value on Android enables legacy mode operation, which is not recommended.
} else {
Titanium.Geolocation.accuracy = Titanium.Geolocation.ACCURACY_LOW; //Using this value on Android enables simple mode operation.
}
};
Geolocate.prototype.getCurrentPosition = function (callback) {
this.isLocationEventRegister = true;
this.locationReceivedCallback = callback;
Titanium.Geolocation.addEventListener("location", this.locationReceivedCallback);
};
Geolocate.prototype.locationServicesAreAvailable = function () {
if (Titanium.Geolocation.locationServicesEnabled) {
return true;
} else {
return false;
}
};
Geolocate.prototype.cancelLocationRequest = function () {
this.unregisterLocationEvent();
};
module.exports = Geolocate;
Actual scenario is whenever I clicked on get location its gives me current location. then i tried to drag it map or image view for nearest place. Suddenly my view go current location. This is happening because of call back ? How to get rid off this ?
It's not a problem to do with your code, it is simply GPS in-accuracy.
GPS accuracy is (almost) never better than 10 meters, meaning it can be 10 meters off. When it recalculates your position it can be 10 meters down the line, so even if you're perfectly still with perfect GPS accuracy, you still might have differences of about 10 meters.
That said, you probably don't have best GPS accuracy when sitting behind a computer in a building, you probably have closer to 30-45 meters accuracy. Meaning every recalculation can easily be 10 meters differently.
Your solution would actually be rate-limit on top of using this property. The property will make sure it will not trigger multiple times per second, and then you can, in your own code, rate limit what you do with it.
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.
I'm playing with redux-saga to create a version of the snake game in react native, and I'm not sure how to go about the game loop implementation. So far I have a working version, but it feels clunky.. the snake moves at different speeds and the game is not very smooth.
Here is what I've got so far:
function *tickSaga() {
while (true) {
yield call(updateGameSaga)
const game = yield select(getGame)
if (game.crashed)
break
yield delay(1000)
}
}
The updateGameSaga basically gets the state from the store, process some logic (finds out if the snake next move will be a crash, move to an empty tile or move to a food tile and grow) and dispatches the corresponding action for it.
I'm slightly aware of things like requestAnimationFrame which I know I should be using, but I'm not sure how to make it work within the saga (maybe I don't need too do it in the saga, hence this question).
Any ideas on how to improve the smoothness of the game loop would be welcome.
UPDATE
I've included redux-saga-ticker, which internally uses setInterval (code here) to periodically send updates to the channel.
function *tickSaga() {
const channel = Ticker(1000); // game tick every 1000ms
while (true) {
yield take(channel);
yield call(updateGameSaga);
const game = yield select(getGame)
if (game.crashed)
break
}
}
It works better now and I like the channel aproach, but I still feel requestAnimationFrame is the way to go, although I'm not yet sure on how to implement it.
How about this.
let lastTime = 0;
function *tickSaga() {
while (true) {
var time = +new Date();
var delayTime = Math.max(0, 1000 - (time - lastTime));
lastTime = time + delayTime;
yield call(updateGameSaga)
const game = yield select(getGame)
if (game.crashed)
break
yield delay(delayTime)
}
}
If you need 60 fps, replace 1000 to 16 (1000/60).
For each tick you have a correction of the interval (time - lastTime) so the ticker interval should be uniform.
I use moment.js to display how many time has passed from some event.
I have a list (rendered using vue.js)
event 3, 5 seconds ago
event 2, 1 minute ago
event 1, 5 minutes ago
The problem is: list is not updated frequently (new items are added, for example, every 2 minutes).
I want to update n (seconds|minutes) ago strings.
Should I do simple loop using setInterval?
for(let i = 0; i < this.list.length; i++) {
let item = this.list[i];
item.created_at_diff = moment(item.created_at).fromNow();
this.$set(this.list, i, item);
}
or there is a better approach?
Here is how I would do such a thing, tell me if I am wrong:
First, I would create a component that will make the timer:
let Timer = Vue.extend({
template: '#timer',
props: ['timestamp'],
data () {
return {
formatted: ''
}
},
methods: {
format () {
let self = this
this.formatted = moment().to(moment(this.timestamp,'X'))
// Uncomment this line to see that reactivity works
// this.formatted = moment().format('X')
setTimeout(() => {
self.format()
},500)
}
},
created () {
this.format()
}
})
The timer takes one property, a UNIX timestamp in seconds. The component contains one method called format() that will update the only data formatted of the component. The method is recursive and calls itself every 500ms (with the setTimeout()), you can make this number bigger if you want.
Here is a jsFiddle I made if you want to test it:
https://jsfiddle.net/54qhk08h/
I have a few properties that have change handlers that request a repaint of a canvas. This works fairly well, but I would like to debounce the signal because a user can only see a limited number of refreshes and some of the data items can change quite frequently. This causes far more refreshes than the user can see and reduces how responsive the UI is.
I have looked at debouncing the signal in javascript (there are examples on the web for how to do that) and tie it in to QML, but I haven't figured out how to get QML and javascript to work together in that way yet.
I would love to see something like the following:
function rateLimitedRefresh(){
// magic to limit to 30 frames per second
canvas.requestPaint()
}
onValueChanged: {
rateLimitedRefresh();
}
With the requestPaint method only being called on the canvas a maximum of 30 times per second.
I used a modification of Mertanian's answer. This modification enforces the frame rate limit at a per frame level as opposed to a per second level.
property var limitStartTime: new Date()
function rateLimitedRefresh(){
// magic to limit to 30 frames per second
var now = new Date();
if (now - limitStartTime >= 32) {
limitStartTime = now
canvas.requestPaint()
}
}
How about something like this:
property var limitStartTime: new Date()
property int refreshesThisSecond: 0
function rateLimitedRefresh(){
// magic to limit to 30 frames per second
if ((new Date()) - limitStartTime >= 33) {
limitStartTime = new Date(limitStartTime.getTime() + 33)
canvas.requestPaint()
}
}
onValueChanged: {
rateLimitedRefresh();
}