1+ // Set setTimeout function
2+ // Set timeout function wait number of milliseconds for execute but at the same time
3+ // other program are run
4+ // setTimeout function call automatically
5+
6+ setTimeout ( function ( ) {
7+ console . log ( "Hello world!" ) ;
8+ } , 3000 ) ;
9+
10+ function getMessage ( ) {
11+ setTimeout ( function ( ) {
12+ console . log ( "Message" ) ;
13+ } , 4000 ) ;
14+ }
15+
16+ function getMessageLong ( ) {
17+ setTimeout ( function ( ) {
18+ console . log ( "Message After Long Time" ) ;
19+ } , 1000 ) ;
20+ }
21+
22+
23+
24+ getMessage ( ) ;
25+ getMessageLong ( ) ;
26+ // console.log("Other Progam are running");
27+
28+
29+ // let persons = [
30+ // {firstName: 'Abdullah', lastName: 'Abdur Rahnam'},
31+ // {firstName: 'Obaydur', lastName: 'Rahman'}
32+ // ]
33+
34+ // function getPerson(persons){
35+ // let output="";
36+ // setTimeout(function(){
37+ // persons.forEach(function(value){
38+ // output += value.firstName + " " + value.lastName + "<br>";
39+ // });
40+ // document.getElementById("output").innerHTML = output;
41+ // },1000)
42+ // }
43+
44+ // function addPerson(person){
45+ // setTimeout(function(){
46+ // persons.push(person);
47+ // },4000)
48+ // }
49+ // // New new elment not pring here because of sychronous behaviour in prgramming. For eliminate it we need to asychronous programming
50+ // addPerson({firstName: 'Abul', lastName: 'Kalam'});
51+ // getPerson(persons)
52+
53+
54+ console . log ( "Other Progam are running" ) ;
55+
56+
57+ let persons = [
58+ { firstName : 'Abdullah' , lastName : 'Abdur Rahnam' } ,
59+ { firstName : 'Obaydur' , lastName : 'Rahman' }
60+ ]
61+
62+ function getPerson ( ) {
63+ let output = "" ;
64+ setTimeout ( function ( ) {
65+ persons . forEach ( function ( value ) {
66+ output += value . firstName + " " + value . lastName + "<br>" ;
67+ } ) ;
68+ document . getElementById ( "output" ) . innerHTML = output ;
69+ } , 500 )
70+ }
71+
72+ function addPerson ( person , getPerson ) {
73+ setTimeout ( function ( ) {
74+ persons . push ( person ) ;
75+ getPerson ( ) ;
76+ } , 2000 )
77+ }
78+ //Asychronous way to solve the problem
79+ addPerson ( { firstName : 'Abul' , lastName : 'Kalam' } , getPerson ) ;
80+
81+
82+ // Promises In Js
83+ // "Producing code" is code that can take some time
84+ // "Consuming code" is code that must wait for the result
85+ // A Promise is an Object that links Producing code and Consuming code
86+
87+ // JavaScript Promise Object
88+ // A Promise contains both the producing code and calls to the consuming code:
89+
90+ // Syntax
91+ // let myPromise = new Promise(function(myResolve, myReject) {
92+ // // "Producing Code" (May take some time)
93+
94+ // myResolve(); // when successful
95+ // myReject(); // when error
96+ // });
97+
98+ // // "Consuming Code" (Must wait for a fulfilled Promise)
99+ // myPromise.then(
100+ // function(value) { /* code if successful */ },
101+ // function(error) { /* code if some error */ }
102+ // );
103+
104+
105+ // When the producing code obtains the result, it should call one of the two callbacks:
106+
107+ // Promise Object Properties
108+ // A JavaScript Promise object can be:
109+ // Pending = undefined
110+ // Fulfilled = a result value
111+ // Rejected = an error object
112+
113+ // Promise How To
114+ // Here is how to use a Promise:
115+ // myPromise.then(
116+ // function(value) { /* code if successful */ },
117+ // function(error) { /* code if some error */ }
118+ // );
119+
120+ // Ex:
121+ let myPromise = new Promise ( function ( myResolve , myReject ) {
122+ setTimeout ( function ( ) { myResolve ( "I love You !!" ) ; } , 3000 ) ;
123+ } ) ;
124+
125+ myPromise . then ( function ( value ) {
126+ document . getElementById ( "prom_out" ) . innerHTML = value ;
127+ } ) ;
128+
129+
130+
131+ function getPerson ( ) {
132+ let output = "" ;
133+ setTimeout ( function ( ) {
134+ persons . forEach ( function ( value ) {
135+ output += value . firstName + " " + value . lastName + "<br>" ;
136+ } ) ;
137+ document . getElementById ( "output" ) . innerHTML = output ;
138+ } , 500 )
139+ }
140+
141+ function addPerson ( person , getPerson ) {
142+ let prom = new Promise ( function ( resolve , reject ) {
143+ let state = false ;
144+
145+ if ( state == false ) {
146+ resolve ( ) ;
147+ } else {
148+ reject ( new Error ( "Promise not accepted" ) ) ;
149+ }
150+ persons . push ( person ) ;
151+ //If resolve function can called it executes the promise successfully
152+
153+ } ) ;
154+
155+ return prom ;
156+ }
157+ //Asychronous way to solve the problem
158+ addPerson ( { firstName : 'Abu' , lastName : 'Huraira' } ) . then ( getPerson ) . catch ( function ( error ) {
159+ console . error ( error . message ) ;
160+ } ) ;
161+
162+ // Example using Promise: Waiting for a file
163+
164+ // let prom = new Promise(function(myResolve, myReject){
165+ // let req = new XMLHttpRequest();
166+ // req.open('GET', 'car.txt', true);
167+
168+ // req.onload = function(){
169+ // if(req.status===200){
170+ // myResolve(req.responseText);
171+ // }else{
172+ // myReject(new Error("Promise not accepted"));
173+ // }
174+ // }
175+
176+ // })
177+
178+ // function myDisplayer(some) {
179+ // document.getElementById("prom_out2").innerHTML = some;
180+ // }
181+
182+ // prom
183+
184+ // function myDisplayer(some) {
185+ // document.getElementById("demo").innerHTML = some;
186+ // }
187+
188+ // let myPromise2 = new Promise(function(myResolve, myReject) {
189+ // let req = new XMLHttpRequest();
190+ // req.open('GET', "myCar.html",true);
191+ // req.onload = function() {
192+ // if (req.status == 200) {
193+ // myResolve(req.response);
194+ // } else {
195+ // myReject("File not Found");
196+ // }
197+ // };
198+ // req.send();
199+ // });
200+
201+ // myPromise2.then(
202+ // function(value) {myDisplayer(value);},
203+ // function(error) {myDisplayer(error);}
204+ // );
205+
206+
207+
208+ //Fetch API
209+ // Fetch like AJAX, this uses javascript promise
210+
211+ document . getElementById ( 'get_jokes' ) . addEventListener ( 'click' , getJokes ) ;
212+
213+ function getJokes ( ) {
214+ //fetch function returns a promise thats why we called then
215+ fetch ( 'https://api.api-ninjas.com/v1/jokes/' , {
216+ headers : {
217+ 'X-Api-Key' : 'f88n0jSzxJ9hdDCDlU8p/A==wrX6uj9eqGVhzao2'
218+ }
219+ } )
220+ . then ( response => response . json ( ) )
221+ . then ( data => document . getElementById ( 'showJokes' ) . innerText = ( data [ 0 ] . joke ) )
222+ . catch ( err => document . getElementById ( 'showJokes' ) . innerText = err . message )
223+ }
0 commit comments