init().
let img=document.createElement('img');
//setting src triggers load
img.src='https://pictures.com/mine.jpg'
while (!img.complete) {
// twiddle my thumbs
}
init();
<script src="early.js">
<div>
content here...
</div>
<script src="late.js">
<script src="s1.js"></script>
<!--page fetch pauses here while s1.js is fetched and executed-->
<script async src="s2.js"></script>
<!--page fetch continues while s2.js is fetched and executed-->
<!--fetch/execute both in parallel-->
<script defer src="s3.js"></script>
<!--page fetch continues while s3.js is fetched-->
<!--s3.js executes after page is loaded-->
<!--fetch in parallel, execute in sequence-->
<button id=button>Click me</button>
missMe = () => {button.textContent=
"did you miss me?"}
button.addEventListener("click",
evt => {
button.textContent = "hello";
setTimeout(missMe, 3000);
}
);
<button id=button>Click me</button>
missMe = () => {button.textContent=
"did you miss me?"}
button.addEventListener("click",
evt => {
button.textContent = "hello";
setTimeout(missMe(), 3000);
}
);
<button id=button>Click me</button>
i=0;
tick = () => {i++;
button.textContent=i}
button.addEventListener("click",
evt => {
setInterval(tick, 500);
}
);
init().
let img=document.createElement('img');
img.addEventListener('load',init);
img.src='https://pictures.com/mine.jpg'
doOtherStuff(); //runs during img load
let img=document.createElement('img');
img.src='https://pictures.com/mine.jpg'
img.addEventListener('load',init);
doOtherStuff(); //runs during img load
let img=document.createElement('img');
let img2=document.createElement('img');
let img3=document.createElement('img');
img.addEventListener('load',init);
img2.addEventListener('load',init);
img3.addEventListener('load',init);
img1.src=img2.src
=img3.src='https://pictures.com/mine.jpg'
doOtherStuff();
img.addEventListener('load',event => {
img2.addEventListener('load', event => {
img3.addEventListener('load',init);
img3.src="https://pictures.com/mine.jpg";
}
img2.src="https://pictures.com/mine.jpg";
}
img1.src='https://pictures.com/mine.jpg'
doOtherStuff();
addEventListener to catch events
loadImage(url1)
.then({img1=result})
.then(loadImage(url2)
.then({img2=result})
.then(loadImage(url3)
.then({img3=result})
.then(init);
loadImage(url1) //returns a promise
.then(result => img1=result)
.then(() => loadImage(url2))
.then(result => img2=result)
.then(() => loadImage(url3)
.then(result => img3=result)
.then(init); //no arrow;
//init is a function
Promise.all([
loadImage(url1)
loadImage(url2)
loadImage(url3)])
.then([u1,u2,u3] => { //note destructuring
img1=u1;
img2=u2;
img3=u3;
})
.then(init);
then() method says what to do when work is done
then() methodthen() can return a value for the next then
then(f) says f is a callback to invoke when promise is fulfilledf receives value of fulfilled promise
p = delayed("hi",1000);
// promise resolves to "hi"
// after 1000ms
p.then(res => console.log(res));
// console outputs 1000ms later
...lots of code
p.then(res => console.log("bye"));
// if p already fulfilled,
// callback executes immediately
wait(1000) //promise fulfilled after 1000ms
.then(() => console.log(1))
.then(() => console.log(2))
.then(() => console.log(3))
wait(1000) //promise fulfilled after 1000ms
.then(() => console.log(1))
.then(console.log(2))
.then(() => console.log(3))
then() callback can return a value (or a promise of one)then() callback in chain when availablethen() returns a new promise p providing that valuethen() is invoked on pp.then() passes on the value of p
//traditional evaluation style
y = f(g(h(x)));
//promise-based
Promise.resolve(x)
// promise with fulfilled value x
.then(h) //h receives x
.then(g) //g receives h(x)
.then(f) //f receives g(h(x))
.then(res => y=res);
.then() always returns a promise
then() returns thatthen() wraps it in a (already fulfilled) promisethen() returns a promise wrapping undefined
then() in chain invoked on new promisedoSomething() and doSomethingElse() return promises
doSomething().then(function () {
return doSomethingElse();
});
doSomething().then(function () {
doSomethingElse();
});
doSomething().then(doSomethingElse());
doSomething().then(doSomethingElse);
then() callbackthen() can take a second callback
then()
fetch(url)
//returns a promise to provide content found at that url
.then(content => {
//executes if fetch is fulfilled
console.log("received" + content);
return 0},
error => {
//executes if fetch is rejected
console.log("error: " + error)
return -1}
})
.then(res => console.log(res))
//logs 0 if fetch succeeded, 1 if it failed
fetch() allows us to send an HTTP request and fetch a remote resource.fetch() returns a Promise that resolves with the response.img/flags in PNG format, with the country code as their filename.Promise.all() tracks multiple promises running in parallel
let p1=fetch(url1);
let p2=fetch(url2);
let p3=fetch(url3);
Promise.all([p1,p2,p3])
.then([c1,c2,c3] =>
{//process all 3 pieces},
err => {handle the error})
.then(f,r) callbacks for when promise resolves
f() invoked if promise fulfilledr() invoked if promise rejectedundefinedp.catch(c): callback c() invoked if promise p is rejected; fulfilled p passed on without change
then(), catch() returns a new promise that can fulfill or rejectp.catch(foo) same as p.then((x)=>x, foo)p.finally(c): callback c() is invoked when promise p is fulfilled or rejectedPromise.race([a,b,c,...]): returns a promise that fulfills as soon as any of a,b,c... dop.resolve(x): promise p becomes fulfilled with value x, invokes all then() callbacksp.reject(x): promise p becomes rejected with value x, invokes all catch() callbacksfulfiller(value) to be called when promise fulfillsrejector(value) to be called when promise rejects
function prepareToResolve(fulfiller, rejector) {
function myCallback(result) {
//invoked when async work completes
if (isGood(result)) {
fulfiller(result)
} else {
rejector("error computing result");
}
}
asynchronousFunction(myCallback);
}
myPromise = new Promise(prepareToResolve);
announce = () => console.log("10 seconds passed");
setTimeout(announce, 10*1000); //old way
function wait (ms) { //promise constructor
return new Promise(fulfiller =>
setTimeout(fulfiller, ms));
//no failures to handle, so ignore rejector
}
wait(10*1000)
.then(announce).catch(failureCallback);
async declares an asynchronous function
Promise that will be resolved when the function finishes and returns its “actual” valueawait any promise
await appears synchronous, but it makes that async function pause and wait for the promise to resolve
async function doMyWork() {
console.log('beginning')
let response =
await fetch("countries.json");
let data = await response.json()
console.log(data);
for (let i=1; i<=5; i++) {
let result =
await delayed('answer',5000);
console.log(i + result);
}
return data;
}
async function f () {
x();
a = await(y());
return z();
}
function f () {
x();
p = y()
.then((res) => {a = res;})
.then(z)
return p
}