function main() { const id = 123; runSideEffects(() => console.log('Getting wedding:', id)); const { wedding, bride, groom } = getWeddingDetail(id); runSideEffects(() => console.log('Wedding detail:', wedding)); }
sideEffects 的实现非常容易：
function runtime(mainFn) { // 参考上面的代码 // 提供 `runSideEffects` const sideEffects = []; window.runSideEffects = fn => { sideEffects.push(fn); }; runMain(); function runMain() { try { mainFn(); sideEffects.forEach(fn => fn()); } catch (error) { // 清除副作用 sideEffects.splice(0, sideEffects.length); } } }
再次运行，'Getting wedding:', 123只显示一次啦~
到底干了些啥？
为了模仿函数暂停和恢复，我们通过 throw 一个错误来“暂停”函数，重新运行来“恢复”函数。
为了从暂停处“恢复”，需要将抛出的错误替换成函数返回值，我们用缓存机制达到了这个目的。
最后，为了能安全的重复执行函数，需要将它转化为一个纯函数。如果有副作用，则将它们收集起来，在函数运行成功后，再执行副作用。
扯这么多，有什么实际用途？
本文的灵感来自于。有了 Suspense，就可以像下面这样来获取数据：
function Component() { const data = getDataFromNetwork(); return <div />; }
getDataFromNetwork 将发起异步请求，所以它是一个异步函数，但 React 让它看来是是一个同步操作。这很有趣~
原文阅读：
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：测试上述代码运行效果。
更多关于JavaScript相关内容可查看本站专题：《JavaScript常用函数技巧汇总》、《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》