score keeper +section27

Bulma-- css framework,可代替bootstrap

不强迫人用Jquery

the call stack调用栈

asynchronous javaScript异步

异步JavaScript - 学习 Web 开发 | MDN

The mechanism the JS interpreter uses to keep track of its place in a script that calls multiple functions

how JS knows what funciton is currently being run and what functions are called from within that function, etc.

when a script calls a function, the interpreter adds it to the call stack and then starts carring out the funtion

Any functions that are called by that function are added to the call stack further up, and run where their calls are reached.

when the current function is finished , the interpreter takes it off the stack and resumes execution where it left  off in the last code listing.

举了一个直角三角形三边和的例子，不断调用函数

JS is single threaded

At any given point in time, that single JS thread is running at most one line of JS code

the browser is not written in JS.

JS hands off some task to browser,

browser come with Web APIs that are able to handle certain tasks in the background( like making requests or setTimeout

the JS call stack recongnizes these web API functions and passes them off to the browser to take care of

Once the browser finishes those tasks, they return and are pushed onto the stack as a callback

console.log('I print first')
setTimeout(() => {
    console.log('I print after 3 seconds');
},3000);
console.log('I print second!);

比如说上面的setTimeout就是浏览器做的工作， js交代完了直接执行了，然后浏览器才完工

const delayedColorChange = (newColor, delay) =>{
    setTimeout(() =>{
        document.body.style.backgroundColor = newColor;
        ], delay)
}
delayedColorChange('olive',3000);

promises

A promise is an object representing the eventual completion or failure of an asynchronous operation.

A promise is a returned object to which you attach callbacks, instead of passing callbacks into a function

const request = fakeRequestPromise('yelp.com/api/coffee');

request
    .then(() => {
        console.log("promise reseloved. it worked")
        fakeRequestPromise('yelp.com/api/coffee2')
            .then(() => {
                console.log("promise reseloved(2). it worked")
            })
            .catch(() = > {
                console.log("promise rejected. eror")
            })


    })
    .catch(() => {
        console.log("promise rejected. eror")
    })

上面的太长了

fakeRequestPromise('yelp.com/api/coffee/page1')
    .then(()=> {
        console.log("it worked(page1)")
        return fakeRequestPromise('yelp.com/api/coffee/page2')
    })
    .then(()=> {
        console.log("it worked(page2)")
        return fakeRequestPromise('yelp.com/api/coffee/page3')
    })
    .then(()=> {
        console.log("it worked(page3)")
    })
    .catch(() => {
        console.log("oh a request failed")
    })

const fakeRequest = (url) => {
    return new Promise((resolve, reject) => {
        const rand = Math.random();
        setTimeout(() => {
            if(rand <0.7) {
                resolve('your fake data');
            }
            reject('request error');
        },1000)
    })
}

fakeRequest('/dog')
    .then(() => {
         console.log("done with request")
    })
    .carch((err) => {
         console.log("oh no", err)
    })

变彩虹色

const delayColorChange = (color, delay) => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            document.body.style.backgroundColor = color;
            resolve();

        }, delay)
    })
}

delayColorChange('red', 1000)
    .then(() => delayColorChange('orange', 1000))
    .then(() => delayColorChange('red', 1000))
    .then(() => delayColorChange('blue', 1000))
    .then(() => delayColorChange('green', 1000))
    .then(() => delayColorChange('purple', 1000))

async functions

a newer and cleaner syntax for working with async code

the async keyword: async functions always return a promise. if the function returns a value, the promise will be resolved with that value. if the function throws an exception, the promise will be rejected

const login = async (username, password) => {
    if (!username || !password) throw 'missing credentials'
    if (password === 'corgifeetarecute') return 'welcome'
    throw 'invalid password'
}
login('aksdff', 'corgifeetarecute')
    .then(msg => {
        console.log("logged in")
        console.log(msg)
    })
    .catch(err => {
        console.log("error")
        console.log(err)
    })

the await keyword: we can only use the await keyword inside of funcitions declared with async.

await will pause the ecevution of the funcition. waiting for a promise to be resolved.

可以不用写.then了

async function rainbow() {
    await delayedColorChange('red',1000)
    await delayedCOlorChange('orange',1000)
    await delayedCOlorChange('yellow',1000)
    return "all done"
}
rainbow().then(() => console.log ("end of rainbow"))
//or
async function printRainbow() {
    await rainbow();
    console.log("end of rainbow")
}

async function makeTwoRequests() {
    try {
        let data1 = await fakeRequest('/page1');
        let data2 = await fakeRequest('/page2');
    }catch(e){
        console.log("error is:",e)
    }
}