一个bug引发对小程序运行原理的思考

一个bug引发对小程序运行的一点点思考

最近遇到一个小程序的bug，问题不大很快解决，但是之后在看小程序运行原理的文章中，回想起这个bug，突然意识到这个bug出现的原因。通过简单讲讲 bug 出现的场景，引出一点点我对小程序运行的认识。

bug场景

在 onLoad 周期有一个循环计时器（setInterval），animation 是循环计时器的函数，内置一个一次性计时器（setTimeout），只有当符合一定条件 animation 函数才会触发一次性计时器，一次性计时器延迟后会继续执行循环计时器。

其实就是一个计时器，一定条件下会延迟一定时间后继续执行这个计时器

onLoad:
timer = setInterval(animation, 3000)
function animation(){
	console.log('animation')
	...
	if(XXX){
		clearInterval（timer）
		delay = setTimeout(function(){
			console.log('timer')
			timer = setInterval(animation, 2000)
		},2000)
	}
}

问：页面卸载后如何停止这个计时器？

答案肯定是在 onUnload 周期清除 timer

问：要是程序执行了到 animation 函数， setTimeout 已经触发，这时候卸载页面会如何？

因为不清楚 delay 进入任务队列的时间，所以我们还要延时再清除一次 timer ,使清除定时器进入任务队列的时间晚于 delay
（对事件循环不了解可看我之前博客，http://blog.csdn.net/u014168594/article/details/78688174）

onUnload:
    clearInterval(timer)
    setTimeout(function(){
      clearInterval(timer)
    },2000) 

好了，现在问题暂时是解决了。但是我有疑问的地方在于，当小程序在页面周期 onUnload 销毁页面时，到另一个页面的执行区域为什么计时器还能执行，而不是一并销毁？

小程序运行原理

其实，小程序由两大线程组成：负责界面的线程（view thread）和服务线程（appservice thread）

服务线程：App 逻辑层，用来逻辑处理、数据请求、接口调用

界面线程：View视图层，渲染页面结构

小程序的所有逻辑都是在一个线程，而页面在另一个线程，所以页面销毁了，但是逻辑层还在，所以程序继续执行。另外，界面线程目前只支持五个页面，就是路由只允许五个页面入栈，减少性能消耗

小程序具体运行原理，可参考其他大神博客
http://blog.csdn.net/tsr106/article/details/53052879
http://blog.csdn.net/xiangzhihong8/article/details/66521459