Javascript setTimeout() function jquery examples and chaining it with afterTime() plugin

jquery_logo

javascript setTimeout() function

  • It takes two arguments.
    1. Callback function to execute after milliseconds supplied.
    2. Milliseconds – after how many milliseconds, callback function will execute?.
  • It’s asynchronous or non-blocking.

    i.e. next line after setTimeout executes immediately and doesn’t wait for callback to execute.

  • It returns a handler that can be used to halt execution of setTimeout() function.
    handler = setTimeout(callback,2000);
    clearTimeout(handler); // cancels execution of callback after 2s.

jQuery setTimeout() usage example

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
$(document).ready(function () {
$('#btn').on('click', function () {
setTimeout(function () {
alert("button clicked");
}, 2000);
});
});
$(document).ready(function () { $('#btn').on('click', function () { setTimeout(function () { alert("button clicked"); }, 2000); }); });
$(document).ready(function () {
    $('#btn').on('click', function () {
        setTimeout(function () {
            alert("button clicked");
        }, 2000);
    });
});

Button Code:-

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<div id="content">
<input type="button" id="btn" value="Alert after 2 seconds" />
</div>
<div id="content"> <input type="button" id="btn" value="Alert after 2 seconds" /> </div>
<div id="content">
    <input type="button" id="btn" value="Alert after 2 seconds" />
</div>

Output:-

jQuery afterTime() method to chain setTimeout() function

jQuery afterTime() method can be used to chain with jQuery selectors

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
jQuery.fn.extend({
afterTime: function (sec, callback) {
that = $(this);
setTimeout(function () {
callback.call(that);
}, sec);
return this;
}
});
jQuery.fn.extend({ afterTime: function (sec, callback) { that = $(this); setTimeout(function () { callback.call(that); }, sec); return this; } });
jQuery.fn.extend({
    afterTime: function (sec, callback) {
        that = $(this);
        setTimeout(function () {
            callback.call(that);
        }, sec);
        return this;
    }
});

Sample Usage of this plugin

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
$(document).ready(function () {
$('#content').append("Dom Ready.<br/>").afterTime(2000, function () {
$(this).append("This will appear after 2 secs.<br/>")
});
});
$(document).ready(function () { $('#content').append("Dom Ready.<br/>").afterTime(2000, function () { $(this).append("This will appear after 2 secs.<br/>") }); });
$(document).ready(function () {
    $('#content').append("Dom Ready.<br/>").afterTime(2000, function () {
        $(this).append("This will appear after 2 secs.<br/>")
    });
});

Demo

Further Chaining:-  it executes jQuery append() without waiting for afterTime() callback to finish.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
$(document).ready(function () {
$('#content').append("Dom Ready.<br/>").afterTime(2000, function () {
$(this).append("This will appear after 2 secs.<br/>")
}).append('This will appear without timer.<br/>');;
});
$(document).ready(function () { $('#content').append("Dom Ready.<br/>").afterTime(2000, function () { $(this).append("This will appear after 2 secs.<br/>") }).append('This will appear without timer.<br/>');; });
$(document).ready(function () {
    $('#content').append("Dom Ready.<br/>").afterTime(2000, function () {
        $(this).append("This will appear after 2 secs.<br/>")
    }).append('This will appear without timer.<br/>');;
});

Demo

 Chaining of afterTime() method to execute multiple setTimeout() synchronously.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
$(document).ready(function(){
$('#content').append("Dom Ready.<br/>").afterTime(3000,function(){
$(this).append("This will appear after 3 secs.<br/>");
$(this).afterTime(2000,function(){
$(this).append("This will appear after 5 secs.");
});
});
});
$(document).ready(function(){ $('#content').append("Dom Ready.<br/>").afterTime(3000,function(){ $(this).append("This will appear after 3 secs.<br/>"); $(this).afterTime(2000,function(){ $(this).append("This will appear after 5 secs."); }); }); });
$(document).ready(function(){
    $('#content').append("Dom Ready.<br/>").afterTime(3000,function(){
        $(this).append("This will appear after 3 secs.<br/>");
            $(this).afterTime(2000,function(){
                $(this).append("This will appear after 5 secs.");    
            });
    });
});

 Demo

Total
0
Shares
Previous Post

Flat UI – Simple HTML tabs without jQuery or any other library

Next Post

How to style HTML form fields using CSS 3 linear-gradient() function?

Related Posts