Passing objects to setTimeout and setInterval timed functions.

For JavaScript timed events we always rely on setTimeout and setInterval to execute a bit of code after a time period or at regular intervals.
They also have a very simple syntax. Generally the code to execute is run inside an anonymous function.

  setTimeout(function(){
    console.log('Hello');
  }, 2000);

This code will post a log message Hello after 2 seconds. This is basic JavaScript. Even W3Schools can teach you this. But how many times have you wanted you object to be passed to that anonymous function, and you just couldn't get it inside there. lets take a simple example. Click on the link below to hide it. Simple to do, even without jQuery. But it should get removed after 1 second. The code which does this is shown below. setTimeout needs minimum 2 arguments. 1 for the code to execute and 2 the duration after which it should execute. But it can also take a 3rd argument ( and any argument that follows ). This argument is placed in the scope of the 1st argument,

<script type='text/javascript'> 
      
      var $ = {};
      $.get = function(el){
        return document.getElementById(el);
      }
      
      window.onload = function(){
        $.get('blow').onclick = function(e){
          console.log('Going to Blow up "a"');          
          setTimeout(function(a){
            a.parentNode.removeChild(a);
          }, 1000, this);
        };
      }
      
    </script>
    <div>
      <button id="blow">Blow Me up</button> 
    </div>

Here this holds the button object which was clicked which has now been passed the anonymous function given to setTimeout by passing it as the 3rd argument to setTimeout. You can pass any number of arguments after the 2nd argument. And they should be set in scope for the 1st argument. Quiet a simple thing to miss out, but comes really handy.