JQuery deferred.then() method

Last Updated : 16 Jul, 2020

This deferred.then() method in JQuery is used to add handlers which are to be called when the Deferred object is resolved, rejected, or in progress.

Syntax:

deferred.then(doneCallbacks[, failCallbacks][, progressCallbacks])

Parameters:

doneCallbacks: This is a function, or an array of functions, which is called when the Deferred is resolved.
failCallbacks: This is a function, or an array of functions, which is called when the Deferred is rejected.
progressCallbacks: This is a function, or an array of functions, which is called when progress notifications are being sent to the Deferred object.

Return Value: This method method returns the deferred object.

There are two examples discussed below:

Example: In this example, the then() method is called with notify and resolve method.

<!DOCTYPE HTML>  
<html>   
<head>  
    <title>  
      JQuery | deferred.then() method 
    </title> 
    <script src="https://code.jquery.com/jquery-3.5.0.js"> 
</script>  
</head>    
<body style="text-align:center;"> 
    <h1 style="color:green;">   
        GeeksForGeeks   
    </h1>  
    <p id="GFG_UP">  
    </p> 
    <button onclick = "Geeks();"> 
    click here 
    </button> 
    <p id="GFG_DOWN">  
    </p> 
    <script>  
        var el_up = document.getElementById("GFG_UP"); 
        el_up.innerHTML = "JQuery | deferred.then() method"; 
        function Func1(val, div){ 
          $(div).append("From doneCallbacks - " + val); 
        } 
        function Func2(val, div){ 
          $(div).append("From failCallbacks - " + val); 
        } 
        function Func3(val, div){ 
          $(div).append("From progressCallbacks - " + val); 
        } 
        function Geeks() { 
            var def = $.Deferred(); 
            def.then(Func1, Func2, Func3); 
            def.notify('Deferred "def" is notified.<br/>' 
                     , '#GFG_DOWN'); 
            def.resolve('Deferred "def" is resolved.<br/>' 
                     , '#GFG_DOWN'); 
        }  
    </script>  
</body>    
</html>       
     

Output:

Example: In this example, the then() method is called with notify and reject method.

<!DOCTYPE HTML>  
<html>   
<head>  
    <title>  
      JQuery | deferred.then() method 
    </title> 
    <script src="https://code.jquery.com/jquery-3.5.0.js"> 
    </script>  
</head>    
<body style="text-align:center;"> 
    <h1 style="color:green;">   
        GeeksForGeeks   
    </h1>  
    <p id="GFG_UP">  
    </p> 
    <button onclick = "Geeks();"> 
    click here 
    </button> 
    <p id="GFG_DOWN">  
    </p> 
    <script>  
        var el_up = document.getElementById("GFG_UP"); 
        el_up.innerHTML = "JQuery | deferred.then() method"; 
        function Func1(val, div){ 
          $(div).append("From doneCallbacks - " + val); 
        } 
        function Func2(val, div){ 
          $(div).append("From failCallbacks - " + val); 
        } 
        function Func3(val, div){ 
          $(div).append("From progressCallbacks - " + val); 
        } 
        function Geeks() { 
            var def = $.Deferred(); 
            def.then(Func1, Func2, Func3); 
            def.notify('Deferred "def" is notified.<br/>', 
                       '#GFG_DOWN'); 
            def.reject('Deferred "def" is rejected.<br/>', 
                       '#GFG_DOWN'); 
        }  
    </script>  
</body>    
</html>  