Delay running a function for 3 seconds?

Question

I'm looking to delay running this function for 3 seconds:

<script type="text/javascript">
$('#FormsPageID table tr:nth-child(12) td:nth-child(2) div span span input')
  .on('focus', function(){
      var $this = $(this);
      if($this.val() == '4/11/2013'){
          $this.val('');
      }
  })
  .on('blur', function(){
      var $this = $(this);
      if($this.val() == ''){
          $this.val('4/11/2013');
      }
  });
</script>

The examples I've come across all involve using setTimeout to or show an element after X seconds. But I'm unsure how that would apply to my function.

what do you want to delay? the part where you bind the events, or do you want to delay the body of the events? — zzzzBov, Apr 11 '13 at 14:43

score 3 · Accepted Answer · edited Apr 12 '13 at 05:10

3

Use setTimeout :

setTimeout(function(){$('#FormsPageID table tr:nth-child(12) td:nth-child(2) div span span input')
 .on('focus', function(){
      var $this = $(this);
      if($this.val() == '4/11/2013'){
          $this.val('');
      }
  })
  .on('blur', function(){
      var $this = $(this);
      if($this.val() == ''){
          $this.val('4/11/2013');
      }
  });}, 3000);

edited Apr 12 '13 at 05:10

Jignesh Rajput

3,538
30
50

answered Apr 11 '13 at 14:42

gabitzish

9,535
7
44
65

thanks, gabitzish! worked perfectly. if i wanted to use the current date for the value instead of 4/11/2013, how would i modify this to do so? – manh2244 Apr 11 '13 at 14:57

Adil · Answer 2 · 2013-04-11T15:12:07.453

3

You need to use setTimeout() as it is fired once on the other hand setInterval() is triggered until clear interval is called.

Live Demo

$('#FormsPageID table tr:nth-child(12) td:nth-child(2) div span span input')
   .on('focus', function(){
    var $this = $(this);
    if($this.val() == '4/11/2013'){
       setTimeout(function(){ 
             $this.val('4/11/2013');
       }, 3000); 
     }
}).on('blur', function(){
      var $this = $(this);
      if($this.val() == ''){
          setTimeout(function(){ 
             $this.val('4/11/2013');
          }, 3000); 
      }
});

setTimeout

The setTimeout() method calls a function or evaluates an expression after a specified number of milliseconds.

setInterval

The setInterval() method calls a function or evaluates an expression at specified intervals (in milliseconds).

The setInterval() method will continue calling the function until clearInterval() is called, or the window is closed.

edited Apr 11 '13 at 15:12

answered Apr 11 '13 at 14:42

Adil

146,340
25
209
204

that doesn't work for me. to clarify, i'm looking to run this 3 seconds after the page has loaded - once loaded, the onfocus and onblur don't need any sort of delay. would wrapping all of my original code in a setTimeout function do the trick? – manh2244 Apr 11 '13 at 14:52
There was typo, setTimout should be setTimeout, check my updated answer with live demo. – Adil Apr 11 '13 at 15:05
if i wanted to use the current date for the value instead of 4/11/2013, how would i modify this to do so? – manh2244 Apr 11 '13 at 15:22

score 0 · Answer 3 · answered Apr 11 '13 at 14:49

0

JQuery has its own .delay() function. For documentation: http://api.jquery.com/delay/

Although I'm not able to test this for myself atm. This might give you a small idea how to accomplish this.

<script type="text/javascript">
$('#FormsPageID table tr:nth-child(12) td:nth-child(2) div span span input').delay(3000).focus(function () { 
    var $this = $(this);
    if($this.val() == '4/11/2013'){
        $this.val('');
    }
  }).delay(3000).blur(function() {
    var $this = $(this);
    if($this.val() == ''){
        $this.val('4/11/2013');
    }
  });
</script>

answered Apr 11 '13 at 14:49

lt.kraken

1,287
3
10
27

if i wanted to use the current date for the value instead of 4/11/2013, how would i modify this to do so? – manh2244 Apr 11 '13 at 15:10
@manh2244 Sorry for my late reaction. In this topic you can preview how to retrieve the current date http://stackoverflow.com/questions/1531093/how-to-get-current-date-in-javascript Simply construct the date and put it into a var which you will use instead of the '4/11/2013' string. – lt.kraken Apr 18 '13 at 13:38

Delay running a function for 3 seconds?

3 Answers3

Linked