liang14658fox

Appearance

settimeout ​

js
function drive(fn) {
    console.log('出发...')
    setTimeout(() => {
        fn()
    }, 3000)
}
function shopping(fn) {
    console.log('...开始购物')
    setTimeout(() => {
        fn()
    }, 2000)
}
(function func() {
    drive(() => {
        console.log('...到达')
    })
    shopping(() => {
        console.log('...购物完')
    })
})()
function drive(fn) {
    console.log('出发...')
    setTimeout(() => {
        fn()
    }, 3000)
}
function shopping(fn) {
    console.log('...开始购物')
    setTimeout(() => {
        fn()
    }, 2000)
}
(function func() {
    drive(() => {
        console.log('...到达')
    })
    shopping(() => {
        console.log('...购物完')
    })
})()
js
function drive(fn) {
    console.log(
        '%cTest', 'background:red;color:#fff;padding:4px;',
        '出发...',
        new Date().getMinutes() + ':' + new Date().getSeconds())
    setTimeout(() => {
        fn()
    }, 3000)
}
function shopping(fn) {
    console.log(
        '%cTest', 'background:red;color:#fff;padding:4px;',
        '开始购物...',
        new Date().getMinutes() + ':' + new Date().getSeconds())        setTimeout(() => {
            fn()
        }, 2000)
}
(function func() {
    drive(() => {
        console.log(
            '%cTest', 'background:red;color:#fff;padding:4px;',
            '...到达',
            new Date().getMinutes() + ':' + new Date().getSeconds())
    })
    shopping(() => {
        console.log(
            '%cTest', 'background:red;color:#fff;padding:4px;',
            '...购物完毕',
            new Date().getMinutes() + ':' + new Date().getSeconds())
    })
})()
function drive(fn) {
    console.log(
        '%cTest', 'background:red;color:#fff;padding:4px;',
        '出发...',
        new Date().getMinutes() + ':' + new Date().getSeconds())
    setTimeout(() => {
        fn()
    }, 3000)
}
function shopping(fn) {
    console.log(
        '%cTest', 'background:red;color:#fff;padding:4px;',
        '开始购物...',
        new Date().getMinutes() + ':' + new Date().getSeconds())        setTimeout(() => {
            fn()
        }, 2000)
}
(function func() {
    drive(() => {
        console.log(
            '%cTest', 'background:red;color:#fff;padding:4px;',
            '...到达',
            new Date().getMinutes() + ':' + new Date().getSeconds())
    })
    shopping(() => {
        console.log(
            '%cTest', 'background:red;color:#fff;padding:4px;',
            '...购物完毕',
            new Date().getMinutes() + ':' + new Date().getSeconds())
    })
})()

回调地狱 ​

js
function drive(fn) {
    console.log('出发...')
    setTimeout(() => {
        fn()
    }, 2000)
}
function shopping(fn) {
    console.log('开始购物...')
    setTimeout(() => {
        fn()
    }, 2000)
}
function gohome(fn) {
    console.log('准备回家...')
    setTimeout(() => {
        fn()
    }, 2000)
}
(function func() {
    drive(() => {
        console.log('...到达')
        shopping(() => {
            console.log('...购物完毕')
            gohome(() => {
                console.log('...到家')
            })
        })
    })
})()
function drive(fn) {
    console.log('出发...')
    setTimeout(() => {
        fn()
    }, 2000)
}
function shopping(fn) {
    console.log('开始购物...')
    setTimeout(() => {
        fn()
    }, 2000)
}
function gohome(fn) {
    console.log('准备回家...')
    setTimeout(() => {
        fn()
    }, 2000)
}
(function func() {
    drive(() => {
        console.log('...到达')
        shopping(() => {
            console.log('...购物完毕')
            gohome(() => {
                console.log('...到家')
            })
        })
    })
})()
js
function drive(fn) {
    console.log(
        '%cTest', 'background:green;color:#fff;padding:4px;',
        '出发...',
        new Date().getMinutes() + ':' + new Date().getSeconds())
    setTimeout(() => {
        fn()
    }, 2000)
}
function shopping(fn) {
    console.log(
        '%cTest', 'background:red;color:#fff;padding:4px;',
        '开始购物...',
        new Date().getMinutes() + ':' + new Date().getSeconds())
    setTimeout(() => {
        fn()
    }, 2000)
}
function gohome(fn) {
    console.log(
        '%cTest', 'background:yellow;color:#fff;padding:4px;',
        '准备回家...',
        new Date().getMinutes() + ':' + new Date().getSeconds())
    setTimeout(() => {
        fn()
    }, 2000)
}
(function func() {
    drive(() => {
        console.log(
            '%cTest', 'background:green;color:#fff;padding:4px;',
            '...到达',
            new Date().getMinutes() + ':' + new Date().getSeconds())
        shopping(() => {
            console.log(
                '%cTest', 'background:red;color:#fff;padding:4px;',
                '...购物完毕',
                new Date().getMinutes() + ':' + new Date().getSeconds())
            gohome(() => {
                console.log(
                    '%cTest', 'background:yellow;color:#fff;padding:4px;',
                    '...到家',
                    new Date().getMinutes() + ':' + new Date().getSeconds())
            })
        })
    })
})()
function drive(fn) {
    console.log(
        '%cTest', 'background:green;color:#fff;padding:4px;',
        '出发...',
        new Date().getMinutes() + ':' + new Date().getSeconds())
    setTimeout(() => {
        fn()
    }, 2000)
}
function shopping(fn) {
    console.log(
        '%cTest', 'background:red;color:#fff;padding:4px;',
        '开始购物...',
        new Date().getMinutes() + ':' + new Date().getSeconds())
    setTimeout(() => {
        fn()
    }, 2000)
}
function gohome(fn) {
    console.log(
        '%cTest', 'background:yellow;color:#fff;padding:4px;',
        '准备回家...',
        new Date().getMinutes() + ':' + new Date().getSeconds())
    setTimeout(() => {
        fn()
    }, 2000)
}
(function func() {
    drive(() => {
        console.log(
            '%cTest', 'background:green;color:#fff;padding:4px;',
            '...到达',
            new Date().getMinutes() + ':' + new Date().getSeconds())
        shopping(() => {
            console.log(
                '%cTest', 'background:red;color:#fff;padding:4px;',
                '...购物完毕',
                new Date().getMinutes() + ':' + new Date().getSeconds())
            gohome(() => {
                console.log(
                    '%cTest', 'background:yellow;color:#fff;padding:4px;',
                    '...到家',
                    new Date().getMinutes() + ':' + new Date().getSeconds())
            })
        })
    })
})()

promise ​

js
function drive() {
    console.log('出发..')
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('...到达')
        }, 2000)
    })
}
function shopping(fn) {
    console.log('开始购物...')
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('...购物完毕')
        }, 2000)
    })
}
drive().then((data) => {
    console.log(data)
    return shopping()
}).then((data) => {
    console.log(data)
})
function drive() {
    console.log('出发..')
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('...到达')
        }, 2000)
    })
}
function shopping(fn) {
    console.log('开始购物...')
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('...购物完毕')
        }, 2000)
    })
}
drive().then((data) => {
    console.log(data)
    return shopping()
}).then((data) => {
    console.log(data)
})
js
function drive() {
    console.log(
        '%cTest', 'background:green;color:#fff;padding:4px;',
        '出发...',
        new Date().getMinutes() + ':' + new Date().getSeconds())
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('...到达')
        }, 2000)
    })
}
function shopping(fn) {
    console.log(
        '%cTest', 'background:red;color:#fff;padding:4px;',
        '开始购物...',
        new Date().getMinutes() + ':' + new Date().getSeconds())
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('...购物完毕')
        }, 2000)
    })
}
drive().then((data) => {
    console.log(
        '%cTest', 'background:green;color:#fff;padding:4px;',
        data,
        new Date().getMinutes() + ':' + new Date().getSeconds())
    return shopping()
}).then((data) => {
    console.log(
        '%cTest', 'background:red;color:#fff;padding:4px;',
        data,
        new Date().getMinutes() + ':' + new Date().getSeconds())
})
function drive() {
    console.log(
        '%cTest', 'background:green;color:#fff;padding:4px;',
        '出发...',
        new Date().getMinutes() + ':' + new Date().getSeconds())
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('...到达')
        }, 2000)
    })
}
function shopping(fn) {
    console.log(
        '%cTest', 'background:red;color:#fff;padding:4px;',
        '开始购物...',
        new Date().getMinutes() + ':' + new Date().getSeconds())
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('...购物完毕')
        }, 2000)
    })
}
drive().then((data) => {
    console.log(
        '%cTest', 'background:green;color:#fff;padding:4px;',
        data,
        new Date().getMinutes() + ':' + new Date().getSeconds())
    return shopping()
}).then((data) => {
    console.log(
        '%cTest', 'background:red;color:#fff;padding:4px;',
        data,
        new Date().getMinutes() + ':' + new Date().getSeconds())
})

async await ​

js
function drive() {
    console.log('出发...')
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('...到达')
        }, 2000)
    })
}
function shopping(fn) {
    console.log('开始购物...')
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('...购物完毕')
        }, 2000)
    })
}
(async function func() {
    console.log(await drive())
    console.log(await shopping())
})()
function drive() {
    console.log('出发...')
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('...到达')
        }, 2000)
    })
}
function shopping(fn) {
    console.log('开始购物...')
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('...购物完毕')
        }, 2000)
    })
}
(async function func() {
    console.log(await drive())
    console.log(await shopping())
})()
js
function drive() {
    console.log(
        '%cTest', 'background:green;color:#fff;padding:4px;',
        '出发...',
        new Date().getMinutes() + ':' + new Date().getSeconds())
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('...到达')
        }, 2000)
    })
}
function shopping(fn) {
    console.log(
        '%cTest', 'background:red;color:#fff;padding:4px;',
        '开始购物...',
        new Date().getMinutes() + ':' + new Date().getSeconds())
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('...购物完毕')
        }, 2000)
    })
}
(async function func() {
    console.log(
        '%cTest', 'background:green;color:#fff;padding:4px;',
        await drive(),
        new Date().getMinutes() + ':' + new Date().getSeconds())
    console.log(
        '%cTest', 'background:red;color:#fff;padding:4px;',
        await shopping(),
        new Date().getMinutes() + ':' + new Date().getSeconds())
})()
function drive() {
    console.log(
        '%cTest', 'background:green;color:#fff;padding:4px;',
        '出发...',
        new Date().getMinutes() + ':' + new Date().getSeconds())
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('...到达')
        }, 2000)
    })
}
function shopping(fn) {
    console.log(
        '%cTest', 'background:red;color:#fff;padding:4px;',
        '开始购物...',
        new Date().getMinutes() + ':' + new Date().getSeconds())
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('...购物完毕')
        }, 2000)
    })
}
(async function func() {
    console.log(
        '%cTest', 'background:green;color:#fff;padding:4px;',
        await drive(),
        new Date().getMinutes() + ':' + new Date().getSeconds())
    console.log(
        '%cTest', 'background:red;color:#fff;padding:4px;',
        await shopping(),
        new Date().getMinutes() + ':' + new Date().getSeconds())
})()