JavaScript的setTimeout与setInterval是两个很容易欺骗别人感情的方法,因为我们开始常常以为调用了就会按既定的方式执行, 我想不少人都深有同感, 例如

setTimeout( function(){ alert(’你好!’); } , 0);
setInterval( callbackFunction , 100);

认为setTimeout中的问候方法会立即被执行,因为这并不是凭空而说,而是JavaScript API文档明确定义第二个参数意义为隔多少毫秒后,回调方法就会被执行. 这里设成0毫秒,理所当然就立即被执行了.
同理对setInterval的callbackFunction方法每间隔100毫秒就立即被执行深信不疑!

但随着JavaScript应用开发经验不断的增加和丰富,有一天你发现了一段怪异的代码而百思不得其解:

div.onclick = function(){
setTimeout( function(){document.getElementById(’inputField’).focus();}, 0);
};

既然是0毫秒后执行,那么还用setTimeout干什么, 此刻, 坚定的信念已开始动摇.

直到最后某一天 , 你不小心写了一段糟糕的代码:

setTimeout( function(){ while(true){} } , 100);
setTimeout( function(){ alert(’你好!’); } , 200);
setInterval( callbackFunction , 200);

第一行代码进入了死循环,但不久你就会发现,第二,第三行并不是预料中的事情,alert问候未见出现,callbacKFunction也杳无音讯!

这时你彻底迷惘了,这种情景是难以接受的,因为改变长久以来既定的认知去接受新思想的过程是痛苦的,但情事实摆在眼前,对JavaScript真理的探求并不会因为痛苦而停止,下面让我们来展开JavaScript线程和定时器探索之旅!

拔开云雾见月明

出现上面所有误区的最主要一个原因是:潜意识中认为,JavaScript引擎有多个线程在执行,JavaScript的定时器回调函数是异步执行的.

而事实上的,JavaScript使用了障眼法,在多数时候骗过了我们的眼睛,这里背光得澄清一个事实:

JavaScript引擎是单线程运行的,浏览器无论在什么时候都只且只有一个线程在运行JavaScript程序.

JavaScript引擎用单线程运行也是有意义的,单线程不必理会线程同步这些复杂的问题,问题得到简化.

那么单线程的JavaScript引擎是怎么配合浏览器内核处理这些定时器和响应浏览器事件的呢?
下面结合浏览器内核处理方式简单说明.

浏览器内核实现允许多个线程异步执行,这些线程在内核制控下相互配合以保持同步.假如某一浏览器内核的实现至少有三个常驻线 程:javascript引擎线程,界面渲染线程,浏览器事件触发线程,除些以外,也有一些执行完就终止的线程,如Http请求线程,这些异步线程都会产 生不同的异步事件,下面通过一个图来阐明单线程的JavaScript引擎与另外那些线程是怎样互动通信的.虽然每个浏览器内核实现细节不同,但这其中的 调用原理都是大同小异.

由图可看出,浏览器中的JavaScript引擎是基于事件驱动的,这里的事件可看作是浏览器派给它的各种任务,这些任务可以源自 JavaScript引擎当前执行的代码块,如调用setTimeout添加一个任务,也可来自浏览器内核的其它线程,如界面元素鼠标点击事件,定时触发 器时间到达通知,异步请求状态变更通知等.从代码角度看来任务实体就是各种回调函数,JavaScript引擎一直等待着任务队列中任务的到来.由于单线 程关系,这些任务得进行排队,一个接着一个被引擎处理.

上图t1-t2..tn表示不同的时间点,tn下面对应的小方块代表该时间点的任务,假设现在是t1时刻,引擎运行在t1对应的任务方块代码内,在这个时间点内,我们来描述一下浏览器内核其它线程的状态.

t1时刻:

GUI渲染线程:

该线程负责渲染浏览器界面HTML元素,当界面需要重绘(Repaint)或由于某种操作引发回流(reflow)时,该线程就会执行.本文虽然重 点解释JavaScript定时机制,但这时有必要说说渲染线程,因为该线程与JavaScript引擎线程是互斥的,这容易理解,因为 JavaScript脚本是可操纵DOM元素,在修改这些元素属性同时渲染界面,那么渲染线程前后获得的元素数据就可能不一致了.

在JavaScript引擎运行脚本期间,浏览器渲染线程都是处于挂起状态的,也就是说被”冻结”了.

所以,在脚本中执行对界面进行更新操作,如添加结点,删除结点或改变结点的外观等更新并不会立即体现出来,这些操作将保存在一个队列中,待JavaScript引擎空闲时才有机会渲染出来.

GUI事件触发线程:

JavaScript脚本的执行不影响html元素事件的触发,在t1时间段内,首先是用户点击了一个鼠标键,点击被浏览器事件触发线程捕捉后形成 一个鼠标点击事件,由图可知,对于JavaScript引擎线程来说,这事件是由其它线程异步传到任务队列尾的,由于引擎正在处理t1时的任务,这个鼠标 点击事件正在等待处理.

定时触发线程:

注意这里的浏览器模型定时计数器并不是由JavaScript引擎计数的,因为JavaScript引擎是单线程的,如果处于阻塞线程状态就计不了时,它必须依赖外部来计时并触发定时,所以队列中的定时事件也是异步事件.

由图可知,在这t1的时间段内,继鼠标点击事件触发后,先前已设置的setTimeout定时也到达了,此刻对JavaScript引擎来说,定时触发线程产生了一个异步定时事件并放到任务队列中, 该事件被排到点击事件回调之后,等待处理.
同理, 还是在t1时间段内,接下来某个setInterval定时器也被添加了,由于是间隔定时,在t1段内连续被触发了两次,这两个事件被排到队尾等待处理.

可见,假如时间段t1非常长,远大于setInterval的定时间隔,那么定时触发线程就会源源不断的产生异步定时事件并放到任务队列尾而不管它 们是否已被处理,但一旦t1和最先的定时事件前面的任务已处理完,这些排列中的定时事件就依次不间断的被执行,这是因为,对于JavaScript引擎来 说,在处理队列中的各任务处理方式都是一样的,只是处理的次序不同而已.

t1过后,也就是说当前处理的任务已返回,JavaScript引擎会检查任务队列,发现当前队列非空,就取出t2下面对应的任务执行,其它时间依此类推,由此看来:

如果队列非空,引擎就从队列头取出一个任务,直到该任务处理完,即返回后引擎接着运行下一个任务,在任务没返回前队列中的其它任务是没法被执行的.

相信您现在已经很清楚JavaScript是否可多线程,也了解理解JavaScript定时器运行机制了,下面我们来对一些案例进行分析:

案例1:setTimeout与setInterval

setTimeout(function(){
   /* 代码块... */
   setTimeout(arguments.callee, 10);
}, 10);

setInterval(function(){
   /*代码块... */
 }, 10);

这两段代码看一起效果一样,其实非也,第一段中回调函数内的setTimeout是JavaScript引擎执行后再设置新的setTimeout 定时, 假定上一个回调处理完到下一个回调开始处理为一个时间间隔,理论两个setTimeout回调执行时间间隔>=10ms .第二段自setInterval设置定时后,定时触发线程就会源源不断的每隔十毫秒产生异步定时事件并放到任务队列尾,理论上两个setInterval 回调执行时间间隔<=10.

案例2:ajax异步请求是否真的异步?

很多同学朋友搞不清楚,既然说JavaScript是单线程运行的,那么XMLHttpRequest在连接后是否真的异步?
其实请求确实是异步的,不过这请求是由浏览器新开一个线程请求(参见上图),当请求的状态变更时,如果先前已设置回调,这异步线程就产生状态变更事件放到 JavaScript引擎的处理队列中等待处理,当任务被处理时,JavaScript引擎始终是单线程运行回调函数,具体点即还是单线程运行 onreadystatechange所设置的函数.

个人补充：

setTimeout或者setInterval的设置的时间参数的具体意思是：在参数指定的时间后将待执行方法放到执行队列中， 如果队列中没有其他方法等待，则回立即执行setTimeout指定的方法，因此有时给人好像是立即执行的假象

确实很好，支持索引，可以方便的离线查询了
下载

http://code.google.com/p/mootoolstools/downloads/list

尝试一下？http://jsfiddle.net/

外部调用演示：

CSS 高级应用 Photoshop

JavaScript 拓展技能 Ajax+UE+SEO+PHP+Mysql 文章摘要 前几天有一个网友留言，提到他正在阅读 “Javascript,CSS,XHTML,Ajax,jQuery” 等等一系列书籍。回想我上学的时候，也是看了很多东西，最终却没有用上，所以，在此写写自己学前端的一些感想。

前端这一行，入门并不困难，掌握XHTML+CSS之后，基本上就可以找到一份工作。
其他的东西，我们可以入职后再慢慢学习。

1. 那怎么才算掌握？掌握到什么程度？
   检验自己水平的最好方式就是实战！学代码，就要边学边做。
   这是最基本的东西，一定要把基础打扎实。
2. 做什么内容？
   我们既然是做前端的，为什么不用标准化的语言来写自己的简历？同样出去找工作，递一份doc的简历好使，还是递一个通过W3C验证的页面更有说服力？实在 不知道拿什么东西练手，甚至可以去重构yahoo的网站，看看他们怎么写的，再对比一下自己的代码。琢磨琢磨他们为什么那么写，有什么优点，有什么缺陷。

之后呢？

1. 掌握JS
   进了公司门，从第一天开始，就要学习JavaScript， 玩到精。JS也是前端必备的技能之一。之所以把它列出去，是让初学者有一个渐进的步骤。同时学太多东西，难以消化，这样分开一步一步的玩精通，压力会小一 些。学完这个，基本上就可以称为一个前端工程师了，对将来的工作非常有帮助。
2. 选择性掌握PS
   Photoshop也是一定要学的，学到什么程度可以根据你自己的需求来定。如果将来想自己做单子，那PS就要玩的很地道。如果将来靠前端吃饭，去大公司 是不需要前端开发做设计稿的，会分层切图就可以了。当然，如果PS玩的很好，是不错的事情。

最后谈一下拓展技能

1. Ajax、jQuery
   这些绚烂的名词，等你工作1-2年，JavaScript玩的烂熟于心的时候，自然会接触到。把他们列为拓展技能，是因为目前中小型企业的网站上应用这些 还不是很多，甚至应用JS的都不是很多。做到前边几项基本上就可以找到一份工作，再掌握这些，自然是画龙点睛之笔。但我的建议是，不妨先看一下下面几个技 能，我个人感觉，更有价值。
2. PHP+Mysql或者ASP或者JSP或者….
   职业的特殊性决定了我们需要跟后端工作者频繁的沟通，掌握这方面的一些知识有利于更有效的交流问题。提升前端在整个团队中的形象，进而提升自己的待遇。另 外，学好这部分东西，有企业找你做网站的时候，你可以拿的更稳妥。至于学PHP还是学JSP，根据自己的爱好来定，我个人比较喜欢 PHP，wordpress是很好玩的东西。
3. SEO+UE（用户体验）
   用户体验是王道，而SEO是吸引用户的王道。我投入了很大的精力在这一领域，所阅读的书籍甚至比前端的书籍还要多。当然，我也一直认为UE就是前端开发不 可缺失的一部分。玩好这一点，往上，可以晋升到产品经理、部门经理的位置；往下，可以博得自己客户的满意。况且这东西并不难学，多留神观察生活就是了。何 乐而不为？

做好一个前端开发工程师，并不是我们最终的目的，前端是一个一专多长的职业，为什么不放大一下自己所学的知识，去做更有意义的工作？掌握了这些方方 面面的技能之后，就已经具备了独立运营网站的技术实力。希望大家能更灵活的运用自己所拥有的能力，做更绚丽的作品，仅以此文共勉。

本文转自：崔凯的blog http://uicss.cn/front-end-developer-needed-technical/

今天在51js上看到一JavaScript测试 就试了一下 发现自己JS水平巨差 只答对了2/14
还是需要恶补 学习ing！

你也测试一下？
http://perfectionkills.com/javascript-quiz/

司徒正美的答案解析：http://www.cnblogs.com/rubylouvre/archive/2010/02/13/1667565.html

谈谈我的一些体验吧！

先看当下一些的网站对“top置顶”的应用:

大家熟悉的QQ校友

QQ空间

他们都有一个共同的体验，那就是给用户一个缓冲的过程，而不是直接飙到顶部。

大多的网站应用方式都是直接给个空的链接，如：href=”#”;这样的置顶很僵硬，很呆板。

本博客底部就用到的缓冲的体验效果，大家不妨看完本文去体验一下哦

说了这么多，还没告诉大家如何去实现，方法有点小难度，当然对于js比较牛的人来说，那就小菜一碟了。。

只看代码：

/**
 * 回到页面顶部
 * @param acceleration 加速度
 * @param time 时间间隔 (毫秒)
 **/
function goTop(acceleration, time) {
	acceleration = acceleration || 0.1;
	time = time || 16;

	var x1 = 0;
	var y1 = 0;
	var x2 = 0;
	var y2 = 0;
	var x3 = 0;
	var y3 = 0;

	if (document.documentElement) {
		x1 = document.documentElement.scrollLeft || 0;
		y1 = document.documentElement.scrollTop || 0;
	}
	if (document.body) {
		x2 = document.body.scrollLeft || 0;
		y2 = document.body.scrollTop || 0;
	}
	var x3 = window.scrollX || 0;
	var y3 = window.scrollY || 0;

	// 滚动条到页面顶部的水平距离
	var x = Math.max(x1, Math.max(x2, x3));
	// 滚动条到页面顶部的垂直距离
	var y = Math.max(y1, Math.max(y2, y3));

	// 滚动距离 = 目前距离 / 速度, 因为距离原来越小, 速度是大于 1 的数, 所以滚动距离会越来越小
	var speed = 1 + acceleration;
	window.scrollTo(Math.floor(x / speed), Math.floor(y / speed));

	// 如果距离不为零, 继续调用迭代本函数
	if(x > 0 || y > 0) {
		var invokeFunction = "goTop(" + acceleration + ", " + time + ")";
		window.setTimeout(invokeFunction, time);
	}
}

调用：

<a href="javascript:void(0);" onclick="goTop();return false;">TOP</a>

查看DEMO