Change opacity of each div over time with setInterval

I’m trying to get each div that is created to have a sort of memory effect where the data will be removed after a certain amount of time. I’ve come up with the idea to set a memory score for each set of data and for that score to decrement over time, but I cannot figure out how to change its value in the database with setInterval.

memFade: function() {
        var thisId = this._id;
        var thisMem = this.memory;

        Meteor.setInterval( function() {
          thisMem -= 0.01;
        }, 2000);

        //StoriesDB.upsert({_id: thisId}, {$set: {memory: thisMem} });

        return thisMem;
      }

Here is my awful attempt to get the value of the memory score and store it into the database at specific intervals, then use the helper to update the div opacity in the HTML. I have no idea what I’m doing…

Do you mean removed from the client or removed from the database?

Removed from the database. It’s something a little experimental that stems from my psychology background. I want the data to work similar to human memory where it can fade over time if not recalled.

I would tackle this in two parts: the removal from the database, and the fading away on screen.

There is an easy way to have MongoDB delete documents from the database after a specific time, but I suspect from your statement, that a document’s retention time will vary depending on how often it’s recalled. So, I would have an indexed keepUntil field in each document: a Date field set at document creation, which may be updated as needed. For documents in the database we don’t need anything elaborate, since they cannot fade away - they are either there or not. I would then use percolate:synced-cron to periodically remove documents whose keepUntil time has passed. I suggest this would not need to happen very frequently (once a minute? once an hour?). When the document is deleted, the client will automatically remove it from the browser (assuming we’re displaying docs reactively). This brings us to the on-screen fading…

On presentation of a document we can use a template helper to set an in-line css opacity based off the difference between time now and the keepUntil time. If we want the fading to continue on-screen as time passes we need to reactively track time, for which I would use something like frozeman:reactive-timer in the opacity helper.

Update: There is a MongoDB way for automatically removing documents at a specific time which would mean that percolate:synced-cron wouldn’t be needed. I’m going to try this in Meteor to see if it’s a good way to simplify your use case.

Update 2: Yep - that works nicely. So as long as you set an index on keepUntil with an expireAfterSeconds:0 you can get MongoDB to handle the document removal. :slightly_smiling: