async generator promise異步方案實際運用

es7 async方案

/******************async***********************/
var timeFn=function(time){
    return new Promise(function(resolve,reject){
        setTimeout(function(){
            console.log(2)
            resolve(3);
        },time)
    })  
}


var asyncFn=async function (){
    console.log(1)
    var parm=await timeFn(5000);
    console.log(parm)
    console.log(4)
}
asyncFn()

generator方案

/******************generator***********************/
var timeFn=function(time){
    return new Promise(function(resolve,reject){
        setTimeout(function(){
            console.log(2)
            resolve(3);
        },time)
    })  
}


var genFn=function * (){
    console.log(1)
    var parm=yield timeFn(5000);
    console.log(parm)
    console.log(4)
}
asyncFn()

promise方案

/******************promise***********************/
var timeFn=function(time){
    return new Promise(function(resolve,reject){
        setTimeout(function(){
            console.log(2)
            resolve(3);
        },time)
    })  
}



console.log(1)
timeFn(5000).then(function(parm){
    console.log(parm)
    console.log(4)
})

產品的需求

工做中的異步實用場景

ended 是音頻播放完畢事件 btnText 是按鈕文案

使用knockout庫

self.timer = ko.observable(3);
        self.focusChoice.subscribe((newVal)=>{
            if (newVal == '單詞') {
                self.timer(3)
            } else {
                self.timer(5)
            }
        })
        self.btnText = ko.observable(`提交`)
        self.disabled = ko.observable(false);
        self.ended = async ()=> {
            console.log(1)
            self.btnText(`${self.timer()}秒後能夠提交`)
            console.log(2)
            await self.promiseTime();
            console.log(3)
            self.btnText('提交')
            console.log(4)
        }
        
        self.promiseTime = ()=> {
            return new Promise((resolve)=> {
                setTimeout(() => {
                    self.disabled(true);
                    resolve();
                }, self.timer() * 1000)
            })
        }

gif