This is one of those situations that its a bit tricky to explain the issue but I will try my best to explain it so I can get some help here.
basically I have a project that I need to allow the users to login/logout even if they have no internet connections.
Every time they login/logout while offline, I store 2 arrays and push to it so I can log them in/out accordingly based on the time they logged in/out.
The arrays look like this:
var logins = [{"id":1,"dateAdded":"2021-10-29T18:27:35.754Z"}, {"id":2,"dateAdded":"2021-10-29T18:28:35.754Z"}, {"id":3,"dateAdded":"2021-10-30T18:28:35.754Z"}];
var logouts = [{"id":1,"dateAdded":"2021-10-29T18:27:50.754Z"}, {"id":2,"dateAdded":"2021-10-29T19:28:35.754Z"}];
To explain the arrays, the id is the id of the account that they logged in/out. the dateAdded is basically the time date that they logged in/out.
Now, the issue: When I run my AJAX code in the below code/fashion, it works fine BUT everything gets executed at the same time which sort of floods the login/logout system and therefore it either won't login or logout of the account(s).
for(let dataSings of logins){
//do my ajax stuff here
}
for(let dataSingo of logouts){
//do my ajax stuff here
}
What I need to do is to come up with a good solution to look into these Arrays, and then log them in and then look into the arrays for the logout with the same id and them log them out again and so on and so forth...
and all of these has be based on the time that its stored in the Array (dateAdded).
I hope I explain this well enough to get some lights shed on it.
To answer your question (even though I think that the approach is flawed)
You should have one array that contains all actions and for each action store the information of what type it is.
And to wait for each request send you can use await and async.
let actions = [{
"type": "login",
"id": 1,
"dateAdded": "2021-10-29T18:27:35.754Z"
}, {
"type": "login",
"id": 2,
"dateAdded": "2021-10-29T18:28:35.754Z"
}, {
"type": "login",
"id": 3,
"dateAdded": "2021-10-30T18:28:35.754Z"
},
{
"type": "logout",
"id": 1,
"dateAdded": "2021-10-29T18:27:50.754Z"
}, {
"type": "logout",
"id": 2,
"dateAdded": "2021-10-29T19:28:35.754Z"
}
]
async function run() {
// sort the array
actions.sort(function(a, b) {
return new Date(b.dateAdded) - new Date(a.dateAdded);
});
for (let action of actions) {
if (action.type === 'login') {
await fetch('/login', {
method: "POST"
// body: data
})
} else if (action.type === 'logout') {
await fetch('/logout', {
method: "POST"
// body: data
})
}
}
}
run();
If you really want to have two arrays you could merge them, and before that add the type to the items. (be aware that this the elements in login and logout are the same as in merged)
var logins = [{
"id": 1,
"dateAdded": "2021-10-29T18:27:35.754Z"
}, {
"id": 2,
"dateAdded": "2021-10-29T18:28:35.754Z"
}, {
"id": 3,
"dateAdded": "2021-10-30T18:28:35.754Z"
}];
var logouts = [{
"id": 1,
"dateAdded": "2021-10-29T18:27:50.754Z"
}, {
"id": 2,
"dateAdded": "2021-10-29T19:28:35.754Z"
}];
let merged = [
...logins.map(item => {
item.type = 'login'
return item
}),
...logouts.map(item => {
item.type = 'logout'
return item
})
]
console.dir(merged)