execute function before ajax - Free Download Execute Function Before AJAX Call Ends - jQuery Just Wait

Free Download Execute Function Before AJAX Call Ends – jQuery Just Wait

Posted on

This time I will share jQuery Plugin and tutorial about Execute Function Before AJAX Call Ends – jQuery Just Wait, hope it will help you in programming stack.

execute function before ajax - Free Download Execute Function Before AJAX Call Ends - jQuery Just Wait
File Size: 62.4 KB
Views Total: 370
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Just Wait is a tiny jQuery plugin that adds a wait() callback to AJAX requests.

The plugin enables you to trigger a function after a specified amount of time has elapsed from the start of the AJAX call.

A typical use of the plugin is to create a loading indicator when the AJAX call is in progress.

How It Works:

  • AJAX request starts.
  • Start counting up to a specified amount of time (defaults to 100ms).
  • Determine whether the AJAX request has ended.
  • If Yes, stop counting.
  • If No, determine whether a specified period of time has elapsed since the start of the AJAX request.
  • If Yes, call the wait() callback.

How to use it:

1. Download & unzip the plugin and then insert the just-wait.min.js after jQuery.

1 <script src="/path/to/cdn/jquery.min.js"></script>
2 <script src="/path/to/dist/just-wait.min.js"></script>

2. Add the wait() callback to your AJAX request.

01 $.get('url')
02   .wait(() => {
03     // do something after 100ms (default)
04   })
05   .done((data) => {
06     // do something after the data is fetched
07   })
08   .fail(() => {
09     // do something when the data fails to load
10   })
11   .always(() => {
12     // do something after The AJAX request ends.
13 });

3. override the default JustWait time in milliseconds.

01 JustWait.options.waitFor = 300;
02  
03 // or
04 $.get({
05   url: '/path/to/data',
06   waitFor: 300
07 })
08  
09 $.ajax({
10   url: '/path/to/data',
11   waitFor: 300
12 })
13  
14 $.post({
15   url: '/path/to/data',
16   data: { id: 3 },
17   waitFor: 300
18 })