|
|
请马上登录，朋友们都在花潮里等着你哦：）
您需要 登录 才可以下载或查看，没有账号？立即注册
x
JS以单线程执行代码。这会让很多人认为JS代码是按顺序自上而下一句接着一句依次执行的。这个说法也没错，试看：
<div id="mydiv">请稍候……</div>
<script>
let 函数1 = () => {
mydiv.innerText += '\n我是函数1';
};
let 函数2 = () => {
mydiv.innerText += '\n我是函数2';
};
函数1();
函数2();
</script>
执行函数1和函数2，其结果是我们预期的：
我是函数1
我是函数2
不过，当函数1要做的事情很耗时，运行结果会如何呢？我们给函数1加一个定时器，假装它要做的事情耗时1秒钟：
<div id="mydiv">请稍候……</div>
<script>
let 函数1 = () => {
setTimeout( () => {
mydiv.innerText += '\n我是函数1';
}, 1000);
};
let 函数2 = () => {
mydiv.innerText += '\n我是函数2';
};
函数1();
函数2();
</script>
执行结果：
我是函数2
我是函数1
这次，结果和上一次相反。原因：JS运行代码的次序虽然是自上而下一句一句交付执行，但这仅限于分派任务，执行结果的快慢要根据各个代码块处理事件的耗时情况而定。上例，函数1延时一秒然后再处理输出事件，可JS的流水线节奏紧凑，该事件的代码交付执行执行之后，余下的代码紧跟着交付。函数2没有延时输出，所以它放到执行线程之后立马就出结果，而函数1则等完自己那一秒时间过了才输出自己的处理结果。
这里面，要牵出两个概念，同步与异步。分派任务，即代码模块交付执行，虽然也确实存在先后次序问题，可是这个环节都是一步到位、瞬间完成，用“秒杀”这个新词汇都不能精准描述这个环节，因此这个环节可视作是同步的。JS流水线是个单线程构架，各个工位上，如果大家也能在相同的时间内完成各自生产环节的工作，那是很理想的状态，通常也都是这样，但是，非常遗憾，一些应用场景下，有些工位上工作复杂、处理加工环节耗时不确定，这就来大麻烦了：我们知道，如果事件间有前后依赖关系（生产线上都这样），前面环节结果尚未出来，后面的环节就不能进行，否则出错或根本无法干下去。异步概念因此引出：各个代码块运行耗时的不同，运行结果不能在同一时间拿到，这可以叫做运行结果异步。运行结果异步完成的现象不是好现象，比如上例，函数1运行耗时较长，假如函数2的运行需要函数1的结果或结果的一部分，则函数2的运行结果就不靠谱，在JS里运行出错，余下的代码块拒绝运行。为避免出错，我们应有异步交付执行的机制，等上一个环节出了结果，再去运行下一个环节。我们改进一下上面的代码：
<div id="mydiv">请稍候……</div>
<script>
let 函数1 = (回调) => {
setTimeout( () => {
mydiv.innerText += '\n我是函数1';
回调();
}, 1000);
};
let 函数2 = () => {
mydiv.innerText += '\n我是函数2';
};
函数1(函数2);
</script>
函数1加了一个“回调”参数，这不是普通的参数，它实际上是一个函数，看它在函数1的调用方式 “回调();” 就知道。回调函数写在定时器里，放在输出结果语句之后。然后，这个非常重要，函数1和函数2不是依次运行，而是，函数1把函数2作为自己的运行参数运行，函数2此时就是函数1里的“回调”那个参数。这就彻底解决了异步问题：函数2的执行放在函数1执行结果出来之后再执行。
不知不觉，我们已经引入了JS的高阶函数，函数1就是，因为它有回调函数。以其他函数做参数的函数就叫高阶函数。而回调函数（callback）很多编程语言也都存在，在JS世界，回调函数主要用于解决环节运行结果异步的问题，一般就命名为 callback 而不是我们在函数1里的“回调”。
|
评分
-
| 参与人数 3 | 威望 +130 |
金钱 +260 |
经验 +130 |
收起
理由
|
 千羽
| + 30 |
+ 60 |
+ 30 |
赞一个! |
 小辣椒
| + 50 |
+ 100 |
+ 50 |
赞一个! |
 红影
| + 50 |
+ 100 |
+ 50 |
赞一个! |
查看全部评分
|
发表于 2023-9-10 09:00
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
楼主
发表于 2023-9-10 20:23
