This one is going to be fun. First, we will make a copy of the members object, then remove all members from the model. Then we will cycle all of the members and add a timeout function for each. When the timeout function executes, it will add the member to the model.
Here is the code!
Let's discuss a few things going on here.
const members = model.members, then
members would just be a reference to the original
model.members. Therefore, when we remove all of the members from the model in the following
members would be pointing to items that no longer exist.
A quick trick to make a copy of an object is to stringify it into JSON. This works because primitive values such as
parse that string back to an object and voilà, our object now lives in a new piece of memory.
We can easily compact that function into a one-liner using an arrow function.
There is more than one way to achieve the visual effect of adding the members one-by-one. We might use the built in function
setInterval instead, which will fire a function every
x seconds until it is manually stopped.
In the above code we used it's sibiling
setTimeout. This fires once at the end of the time given to it (in milliseconds). The idea is that we quickly loop every member, and create an instance of
setTimeout. By the time the loop finishes, there will be as many instances of
setTimeout as there is members in the model.
For each of these instances, we provide a "callback" function to execute when the timeout finishes. In the callback function, we get the next member to add, explicitly choose the ID of the member, add it back in, and re-render the view.
Before continuing to the next iteration to add the next timeout, we increment the
wait_time for the next member. Therefore by the time the loop finishes, member 1 will have a timeout of 1s, the next member slightly more and so on. There would be drift from the time it takes for the loop to execute however, this is obviously not an issue for us here.
If the App appears to lag severly, try closing the developer tools. This is a common issue with Google Chrome.
Alright, try it out and let's move on! Next up, locating the longest member.