佳佳酱教程

[Javascript]使用Generator函数创建你自己的异步函数

5条评论

欢迎来到佳佳doubi小课堂~在这里你可以学到实用又错误的知识×。

好久没写正经的博文了，让我来正经一下。

使用Generator函数来创建你的异步函数，先说明一下原理。

Generator函数是ES6里的新函数类型，函数定义写作这样

1
2
3
4
function* a(){
    …
}
 

看到没，在函数名和function之间多了一个*号，这不是我写错了，是Generator函数的标志，这个*号其实也可以贴着函数名写 function *a(){}，也可以不加空格 function*a(){}，不过还是推荐把它贴着function写，这样既不会影响一些编辑器里的高亮，也不会降低代码可读性。

那么为什么Generator函数可以用来做异步函数呢？

我们普通的函数都是顺序执行的，像这样

1
2
3
4
5
6
7
function a(){
    console.log(1);
    console.log(2);
    console.log(3);
}
a();
 

会在控制台依次输出

1
2
3
1
2
3

当然这不能说明什么，不过可以留着和接下来的示例代码做对比。

 

Generator函数有一个和普通函数不同的地方，它里面可以出现一个叫做’yield’的关键字。
yield关键字可以让函数执行到它前面以后暂停，飞出当前的执行环境去做其他事，当这个Generator的next()方法被调用的时候，js又会回到这个函数环境里，继续执行代码。

注：关于’yield前面’的解释
yield前面指的并不是带有yield这个关键字的语句的前面一句，而是跟在yield关键字后面的语句。在Generator函数被用来做异步函数时yield一般都会以这样的形式出现:

1
2
3
4
5
function* a(){
    console.log(1);
    let result=yield 一个异步函数;
    console.log(2);
}

这个异步函数指的就是yield的前面，因为它的执行顺序是到那个异步函数之后就暂停，当Generator的next被调用的时候此处的yield就会获取到next函数的参数，然后赋值给result变量，然后接着执行下去。当然，如果yield单独成句的话，那就相当于执行到前一句暂停了。

上面的注释可能打得太早了，你如果原本不知道Generator是什么的话可能会看不懂，不过你可以先往下看，然后再倒上来看一次。

Generator函数的使用方法要先说明一下，虽然在这篇文章里这不是主要的，我完全可以直接丢个代码出来说说怎么写个异步函数就可以完事了，不过本着提高误导教程的biger的精神，我决定写详细一些。

Generator的定义上面说过了

1
2
3
4
5
6
7
8
9
10
11
function* a(){
    //你的代码
    //我还是负责地写个例子吧，不过这里的例子先不涉及异步，不过会体现一下yield的各种写法
    var i=123;
    console.log(i);
    yield console.log(234);//输出234后暂停
    let iWillGetAParameter=yield;//直接暂停，等待next传来的参数
    console.log(iWillGetAParameter);
    yield;//无意义的暂停
    yield;//同上
}

Generator的调用(这里的代码接着上面的环境)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var fun=a();//注：这一句代码并不会执行a函数，而是使fun变量变成了一个Generator
 
fun.next();
//第一次执行next表示开始执行函数，所以带参数没有意义
//这一句会导致a执行到console.log(234)
 
fun.next();
//这句会使a执行到下一个yield前然后停下
//（在上面的代码里其实就是什么也没有执行，只是刚回去又被飞出来了）
 
fun.next('Your parameter');
//传入参数，next就像一个黑洞，把参数吞了进去，而它会立刻在暂停了函数的yield中吐出来，
//结果就被赋值给了yield前面的变量iWillGetAParameter，接着就会输出这个字符串了
 
//下面还有两个没意义的暂停我就不继续调用了

以上代码的过程可以解释如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
生成Generator：fun
Generator进入待续状态
调用next
定义变量i=123
输出i    (123)
输出234
暂停
调用next
暂停
调用next('Your parameter’)
yield丢出传入的参数
iWillGetAParameter接收到参数
输出iWillGetAParameter
暂停

可以看到，正是因为可以随意出入函数环境的特性，使Generator可以用来制作自己的异步函数。
相比使用setTimeout来模拟异步的好处就是可以保持函数的变量环境，不用让setTimeout带着一大堆参数一起跑了。

首先，我要定义一个特别的函数(这是我的做法，实际做法多种多样)

1
2
3
4
5
runasync=function(gen){
    let g=gen(function(){g.next(arguments);});
    g.next();
    return g;
}

它是啥？它是用来帮我们来调用next函数的函数，把要异步执行的过程丢给它，然后函数就会自己异步执行起来，而不用我们来一个个调用next了。

然后可以开始制作我们可爱的异步函数啦。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function papapa(pa,callback){//我怎么定义了一个普通函数？
    runasync(//实际上异步过程写在这里了，外面的函数只是一个套套而已
        function*(letmenext){//这里的letmenext，从上面的代码可以看出，是runasync函数丢进来的一个函数，用以调用next
            var t='我是一开始定义的字符串';
            console.log('にゃ！');
            yield process.nextTick(letmenext);
            //这里写的是node代码，process.nextTick是一个异步函数，用于在进程有空的时候调用传入的函数
            //(在这也就是在进程有空时间接调用了这个Generator的next函数，使之断续执行)
            console.log('萌え佳佳');
            yield process.nextTick(letmenext);
            console.log('不服上面的话？');
            yield process.nextTick(letmenext);
            console.log('不服来战！');
            yield process.nextTick(letmenext);
            console.log(t);
            callback(pa+'执行完啦！');//执行到结尾调用回调函数
        }
    );
}

老实说我写到这里开始有些后悔叫它异步函数了，因为其实所有过程还是在js主进程里执行的，更准确的说这应该叫协程，可以算是个模拟的多线程。不过也没关系啦，反正都这么写了。。。不太讲究的话其实表面来看是一个意思。

然后执行之，测试异步函数的话，一个个执行肯定是没有意思的，所以要同时调用多个来测试，于是就这样

1
2
3
4
5
papapa(1,function(t){console.log(t)});//为了区分各个调用，我给进了不同的数字作为第一个参数，第二个是’回调函数’，会在执行完之后调用
papapa(2,function(t){console.log(t)});
papapa(3,function(t){console.log(t)});
papapa(4,function(t){console.log(t)});
papapa(5,function(t){console.log(t)});

猜猜结果是什么？

在我的node里输出如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
にゃ！
にゃ！
にゃ！
にゃ！
にゃ！
萌え佳佳
萌え佳佳
萌え佳佳
萌え佳佳
萌え佳佳
不服上面的话？
不服上面的话？
不服上面的话？
不服上面的话？
不服上面的话？
不服来战！
不服来战！
不服来战！
不服来战！
不服来战！
我是一开始定义的字符串
1执行完啦！
我是一开始定义的字符串
2执行完啦！
我是一开始定义的字符串
3执行完啦！
我是一开始定义的字符串
4执行完啦！
我是一开始定义的字符串
5执行完啦！

可以看出这5个调用全部被拆分了，而不是一个执行完再执行另外一个。而且函数内部环境是一直保存到执行结束的。

===================================================
我知道你们最喜欢例子，来来来，往这看

  • 在浏览器里支持像nextTick这种空闲时调用函数的方法也有来着，不过我忘了，而且支持的浏览器似乎也很有限。所以在浏览器环境中使用这种方法的可能不多，如果你想，可以用setTimeout来调用letmenext，一样可以达到这样的效果。
  • 还有其它任何异步函数都可以用来在callback的位置传递letmenext(要注意，传递letmenext作为回调的函数必须确保只会执行它一次，否则会扰乱运行结构)。
  • 也可以用这种异步方法来做动画效果，搭配定时函数，可以把动画节点依次写下去，配合css变换。而不用一个个setTimeout嵌套下去，变成一团难看的代码。
  • 说到动画效果,requestAnimationFrame函数也可以用来触发，不过受限于屏幕刷新率和绘图速度。
    还有一个用法就是可以把一系列异步函数写在一排里，而不用层层嵌套。代码好看多了喵！
  • 一般这样的伪多线程模式用在会耗时很久的函数上，防止阻塞其它事务。在函数里适当的地方放一个暂停即可异步之。

各种异步函数使用方法自己研究去吧，我才不会再写一个例子出来呢CwC。

参考：



2018年7月起本站文章未经文下加注授权不得拷贝发布。

本博客使用Disqus评论系统，如果看不到评论框，请尝试爬墙。