jQuery Deferred .promise() method

0 0 1 minute read

This .promise() method in JQuery Returns a Promise object to be observed when certain type actions bounded to the collection, queued or not, are ended.

Syntax:

.promise([type][, target])

Parameters:

type: This parameter specifies the type of queue which needed to be observed.
target: This parameter specifies Object onto which the promise methods need to be attached.

Return Value: This method returns a dynamically generated Promise which is resolved once actions bounded to the collection, queued or not, have finished.

There are two examples discussed below:

Example: In this example, the Deferred() is used to create a new object and after that then() method is called with notify and resolve method.

<!DOCTYPE HTML>  
<html>   
<head> 
    <title>  
      JQuery.when() 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.when() method"; 
        var def = $.Deferred(); 
        function Geeks() { 
            $.when().then(function(a) { 
              alert( "when() method called this alert()." ); 
            }); 
        }  
     </script>  
</body>    
</html>         

Output:
Before clicking on button:

After clicking on button:

Example: In this example, the Deferred() method is used and the state of Deferred object is checked.

<!DOCTYPE HTML>  
<html>   
<head> 
    <title>  
      JQuery.when() 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.when() method"; 
        var def = $.Deferred(); 
        function Geeks() { 
            $.when(def).done(function (x) { 
              $('#GFG_DOWN').append('when() method is executed.') 
            }); 
            def.resolve(); 
        }  
     </script>  
</body>    
</html>               

Output:

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!