服务器之家

服务器之家 > 正文

JavaScript 异步编程指南 - 如何用异步任务解决递归栈溢出?

时间:2021-11-02 23:20     来源/作者:编程界

JavaScript 异步编程指南 - 如何用异步任务解决递归栈溢出?

在编程中使用递归,如果没有控制好代码的执行边界或过多层级的递归调用,就会造成栈溢出错误,就像下面展示的这段错误堆栈。

  1. RangeError:Maximumcallstacksizeexceeded
  2. atfn(/xxx/test.js:2:3)
  3. atfn(/xxx/test.js:7:10)

为什么递归会造成堆栈溢出?

函数运行会有一个执行栈,每次调用会做入栈操作,保存一些局部变量、函数参数、当前程序的运行状态等,这些信息都会保存在栈空间里,而栈空间的存储是一段连续的内存地址,有大小限制。

以下是一段递归调用的简单示例。

  1. functionfn(i){
  2. i--;
  3. if(i<1){
  4. return;
  5. }
  6. returnfn(i);
  7. }
  8. fn(20000);

以下通过 gif 动图展示了上述代码的执行过程,当在主线程上调用 fn 函数后,不断的做压栈操作,而栈空间也在不断的增加,直到达到最大的栈空间限制,程序报错 “Maximum call stack size exceeded”。


JavaScript 异步编程指南 - 如何用异步任务解决递归栈溢出?

javascript-recursion-stack-overflow (1).gif

使用异步解决栈溢出问题解

决递归造成的栈溢出问题,一种方法是可以使用 JavaScript 中的异步任务,也是借助了事件循环机制。宏任务有 setTimeout、Node.js 环境下的 setImmediate,微任务有 Promise、queueMicrotask。

修改代码,在 setTimeout 函数里递归调用。

  1. functionfn(i){
  2. i--;
  3. if(i<1){
  4. return;
  5. }
  6. setTimeout(function(){
  7. fn(i);
  8. },0);
  9. }
  10. fn(20000);

运行效果如下所示:


JavaScript 异步编程指南 - 如何用异步任务解决递归栈溢出?

javascript-async-recursion.gif

当首次调用 fn(2000) 时,创建一个调用栈,函数内部调用 setTimeout 函数后会立即返回,当前的调用栈就结束了,传入的回调 **function() { fn(i) }** 还没有执行,主线程不会在这里等待,也不会形成层层嵌套的调用链。

定时器函数由宿主环境实现,当将来的某个时间点计时器时间到达后,宿主环境会将 timer 函数封装为一个事件放入 “任务队列” 中,事件循环检测到任务队列有可执行的任务,就拿出来执行,之后再次调用 fn(i) 创建新的调用栈,反复循环。

还可以通过微任务实现,微任务有个缺点是当调度大量的微任务时虽然不会导致调用栈溢出,但也会导致和同步任务相同的性能缺陷,后面的任务得不到执行,浏览器的渲染工作也会被阻止,直到所有的微任务执行完毕。

总结

这个问题通过结合异步任务来解决递归造成的栈溢出问题,也可以做为事件循环的一个例子来学习,更好的掌握同步任务、异步之间的调度关系。

在程序中使用递归还是要谨慎的,若控制不好边界,很容易造成 “栈溢出”。除了改为异步任务调用外,还可将递归改为循环迭代、尾递归优化等。

原文链接:https://mp.weixin.qq.com/s?__biz=MzU3NTg5MjU1Mw==&mid=2247484390&idx=1&sn=7a7c280184bc560ccfe4cbf5c4d30ed5&chksm=fd1d7ec0ca6af7d6730c9543a44c65b4a799f4afa6df5901a9e944c36da2f74ed3a17610b1d0&mpshare=1&

相关文章

热门资讯

yue是什么意思 网络流行语yue了是什么梗
yue是什么意思 网络流行语yue了是什么梗 2020-10-11
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
2021年耽改剧名单 2021要播出的59部耽改剧列表
2021年耽改剧名单 2021要播出的59部耽改剧列表 2021-03-05
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总 2020-11-13
返回顶部