Timing Changes With JS

Question

I wish to execute different functions at different times without them overlapping with each other.

Bit of context - I want to remove elements of a page one element at a time rather than all at once over a period of time.

For example, at 1:00am remove element 1 then at 2:00am remove element 1 + 2 and so on.

The removal of the elements will be done using JQuery.

EDIT:

    window.setInterval(function(){ // Set interval for checking
    var date = new Date(); // Create a Date object to find out what time it is
    if(date.getHours() === 12 && date.getMinutes() === 18){ // Check the time
        $(function() {
    //Remove Elements
    $('#element1').remove();
       })
}, 10000); // Repeat every 10000 milliseconds (10 seconds)

This is what I have so far for timing one function - seeing error : Uncaught SyntaxError: Unexpected token , .

Answer 1

Here is a simple code snippet that has two variants for scheduled removal of elements.

• option 1: specify after in milliseconds and it will remove element by given selector after milliseconds pass. Timeout starts to count after calling ScheduledRemover.work(settings);
• option 2: specify at as object which could have the following structure

__

at: {
    h: 14, // (Optional) the hour at which remove should be executed
    m: 30, // (Optional) the minute at which remove should be executed
    s: 23  // (Optional) the second at which remove should be executed
}

The code will calculate the difference of current time and desired removal time and will set timeout using setTimeout to execute the removal. This way you don't have to check every time in setInterval if the time has come.

Hope this was helpful. Let me know if any questions come up. Cheers!

var ScheduledRemover = (function() {

  function _work(settings) {
    for (let i = 0; i < settings.length; i++) {
      let schedulerRemove = settings[i];
      if (schedulerRemove.at) {
        /* Remove element at specific time */
        var currentTime = new Date();
        var removalTime = new Date();
        if (typeof schedulerRemove.at.h === 'number') {
          removalTime.setHours(schedulerRemove.at.h);
        }
        if (typeof schedulerRemove.at.m === 'number') {
          removalTime.setMinutes(schedulerRemove.at.m);
        }
        if (typeof schedulerRemove.at.s === 'number') {
          removalTime.setSeconds(schedulerRemove.at.s);
        }

        var removeAfter = removalTime - currentTime;
        if (removeAfter >= 0) {
          /* If difference is less than 0 then time for the removal passed */
          setTimeout(function() {
            $(schedulerRemove.selector).remove();
            console.log(schedulerRemove.selector + ' removed ...');
          }, removeAfter);
        } else {
          console.log('Time passed for removing ' + schedulerRemove.selector);
        }
      } else if (schedulerRemove.after) {
        /* Remove element after specific time */
        setTimeout(function() {
          $(schedulerRemove.selector).remove();
          console.log(schedulerRemove.selector + ' removed ...');
        }, schedulerRemove.after);
      }
    }
  }

  return {
    work: _work
  }
}());

var settings = [{
    selector: '#element1',
    after: 2000
  },
  {
    selector: '#element2',
    after: 5000
  },
  {
    selector: '#element3',
    at: {
      h: 14,
      m: 49
    }
  },
  {
    selector: '#element4',
    at: {
      h: 14,
      m: 53,
      s: 1
    }
  },
  {
    selector: '#element5',
    after: 30000
  }
];

ScheduledRemover.work(settings);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="element1">Element 1</div>
<div id="element2">Element 2</div>
<div id="element3">Element 3</div>
<div id="element4">Element 4</div>
<div id="element5">Element 5</div>