Snooda

今天想做个在右下角弹框的功能。

首先找了一些成品。发现居然都不能随着页面的滚动而移动。

解决方法：
一，使用window.scroll事件动态调整位置。缺点：快速滚动页面时明显抖动。故不用。
二，css中position:fixed。但顾及IE6的兼容性，需加：
* html #winpop {position: absolute; top: expression(offsetParent.scrollTop+document.documentElement.clientHeight-this.offsetHeight); }

其中* html规则只对IE有效。

我采用了方法二。完美。

准备设计成如下动作：打开页面时，框自下而上移动上来，停留一段时间，隐藏到只剩标题。鼠标移上，挪出；鼠标离开，隐藏。

刚开始就是很简单的的设计，检测到onMouseOver 就调用挪出函数，检测到onMouseOut就调用隐藏函数。挪出函数（show)和隐藏函数(hide)都用setInterval来实现渐渐移出/隐藏的动态效果。达到移动效果后使用clearInterval结束循环。但是很快发现框发生了颤抖，陷入死循环。

去网上查了下资料，发现JavaScript是单线程运行的，所有系统事件触发的回调函数都放到消息队列中依次执行。这样的话在框上升过程中鼠标移开，那么show和hide同时运行，各自不停的向消息队列插入挪出和隐藏消息。结果框始终不能完全隐藏或完全挪出。于是不停上下颤动。陷入死循环。

解决方法：调用hide函数时首先使用clearInterval结束一下show函数的循环，同理，调用show函数时也结束hide函数的循环。这样就不会产生两循环同时运行的结果了。



总结：JavaScript使用单线程模型固然省去了很多同步互斥问题，但是也影响了其实时性，消息队列的使用使函数从被调用到真正运行存在一定延迟，导致设置同样的延时，不同浏览器上实际延迟时间不同，给用户的体验也不同。Chrome中框的运动速度要明显快于IE8。