JS异步函数 返回值

1.  js 异步的几种情况 ：

1.1 异步操作由浏览器内核的 webcore 来执行：

onclick 由浏览器内核的 DOM Binding 模块来处理，当事件触发的时候，回调函数会立即添加到任务队列中。
setTimeout 会由浏览器内核的 timer 模块来进行延时处理，当时间到达的时候，才会将回调函数添加到任务队列中。
ajax 则会由浏览器内核的 network 模块来处理，在网络请求完成返回之后，才将回调添加到任务队列中。

1.2 如：http （ajax）、UI 重绘 、事件 （ onclick ）、延时函数 （setTimeout）

 

2. 异步函数返回值处理

2.1 setTimeout

    function getSomething(cb) {
      var r = 0;
      setTimeout(function () {
        r = 2;
        cb(r);
      }, 2000);
    }
    function compute(x) {
      console.log(x);
    }
    getSomething(compute);

View Code

 

2.2 promise

function getSomething() {
    var r = 0;
    return new Promise(function(resolve) {
        setTimeout(function(){
            r = 2;
            resolve(r);
        },2000)
    })
}
function compute(x) {
    console.log(x * 2);
}
getSomething().then(compute);

View Code

初探Promise 

 

2.3 async 

function getSomething() {
    var r = 0;
    return new Promise(function(resolve) {
        setTimeout(function() {
            r = 2;
            resolve(r);
        },2000)
    })
}
async function compute() {
    var x = await getSomething();
    console.log(x * 2);
}
compute();

View Code

 

2.4 generator

function getSomething() {
    var r = 0;
    setTimeout(function() {
        r = 2;
        it.next(r);
    },2000);
}
function *compute(it) {
    var x = yield getSomething();
    console.log(x * 2);
}
var it = compute();
it.next();

View Code

 

2.5 promise和generator相结合

function getSomething() {
    var r = 0;
    return new Promise(function(resolve) {
        setTimeout(function() {
            r = 2;
            resolve(r);
        },2000)
    })
}
function *compute() {
    var x = yield getSomething();
    console.log(x * 2);
}
var it = compute();
it.next().value.then(function(value) {
    it.next(value);
})

View Code

 

 

3. 相关文章

异步原理的理解和总结

JS同步异步以及回调函数？

JS异步函数返回值的几种方式

详解回调函数——以JS为例解读异步、回调和EventLoop

告诉你什么是javascript的回调函数

 

转载于:https://www.cnblogs.com/justSmile2/p/10524585.html