Javascript

JavaScript计时

JavaScript与时间相关的函数或对象

在JavaScript中，与时间相关的对象为Date类型对象，可以获取现在的时间等。如果要对使一个函数延迟执行，可以使用setTimeout()；如果要让一个函数周期性执行，可以使用setInterval()。同时在最新的Web Timing API中，可以使用window.performance来获取页面在被加载到浏览器都经历了哪些阶段，以及这些阶段的时间，从而找出性能瓶颈并解决。

setTimeout()与setInterval()

JavaScript是单线程语言，但它允许通过超时值setTimeout()和间歇时间值setInterval()来调用代码在特定的时刻执行。由于JavaScript的单线程特性，这两个方法对于时间的控制都是不精确的。这两个方法都是有window对象提供的，所以其具体实现与浏览器相关，故对时间控制的准确程度因为浏览器不同而不同。通过测试，火狐对于时间的控制更加精确一些。

setTimeout()与clearTimeout()

setTimeout接受两个参数：要执行的代码和以毫秒表示的时间。第一个参数可以是一个包含JavaScript代码的字符串（和在eval()中一样，所以不推荐此方式），也可以是一个函数。通过setTimeout()设置后，会返回一个数值ID，是这个将要执行代码的唯一标示；要取消，就需要调用clearTimout(ID)来取消它。示例如下：

1
2
3
4
5
setTimout("alert('hello')",1000)l;//不推荐此参数类型。一秒后调用
var timeoutId = setTimout(function(){
    alert('hello');
    },1000);//推荐此参数类型。
clearTimeout(timeoutId);//取消这个超时调用。

setInterval()与clearInterval()

setInterval与setTimeout一样都接受两个参数。不同之处在于：setInterval为间歇调用。下面实例中，展示了一个倒计时如下：

1
2
3
4
5
6
7
8
9
10
var num=10, max=10, interval=null;
intervalId = setInterval(function(){
    if(num>0){
        console.log(num);
    }else{
        clearInterval(intervalId);
        console.log('Time Up!');
    }
    num--;
    },1000)

实现原理

暂时略，以后补上~

Date

ECMAScript中的Date类型是在早期Java的java.util.Date类基础上构建的。Date类型使用UTC1970年1月1日零时开始经过的毫秒数来保存日期。

Date创建

要创建一个日期对象，可以使用new来新建，并传入相应的日期参数（如果为空，则表示当前时刻）。另外，如果只是为了获取当前时间，也可以使用Date.now()方法。Date提供了Date.parse()和Date.UTC()来将你输入的日期转化为UTC格式的Date。
Date.parse解析的格式：将地区设置为美国的浏览器接受的日期格式为：月/日/年、 英文月名 日，年、 英文星期几 英文月 日 年 时:分:秒 时区(如TUE May 25 2004 00:00:00 GMT-0700)、YYYY-MM-DDTHH:mm:ss.sssZ
Date.UTC()的参数分别为年份、月份（0表示1月）、日、小时、分钟、秒、毫秒。上述参数中，只有年份和月份是必须要有的。示例如下：

1
2
3
4
5
6
var now = new Date();//现在时刻，格式与浏览器行为有关。
var now = Date.now();//格式为一系列数字
var someDate = new Date(Date.parse('May 25,2004'));//2004年5月25日零时
var someDate = new Date('May 25,2004');//同上，会自动调用Date.parse
var otherDate = new Date(Date.UTC(2005,4,5,17,55,55));//GMT时间2005年5月5日下午5:55:55
var otherDate = new Date(2005,4,5,17,55,55);//*本地时间*2005年5月5日下午5:55:55

在不同的浏览器中，时间的表示格式可能不同，对于时区的处理也不相同。如上面的例子中，chrome在处理otherDate都是按照本地时区，而火狐则是根据上述行为处理的。由于这些时间都是对象，所以不能通过==来判断两个时间是否相同（对象引用相同才会相等），而应该判断两个时间插值是否为0。

日期表示

Date类型有重写了toLocaleString()、toString()方法，其可以返回特定格式的时间，但浏览器之前可能存在不同。菜外还有些其他专门用于将日期格式化为字符串的方法。如下：

  • toLocaleString()，按照与浏览器设置的地区相适应的格式返回日期和时间。
  • toString()，通常返回带有时区信息的日期和时间
  • toDateString()，星期几 月 日 年（特定于格式）
  • toTimeString()，时:分:秒 时区（特定于格式）
  • toLocalDateString()，星期几 月 日 年（特定于本地区）
  • toLocalTimeString()，时:分:秒 时区（特定于本地区）
  • toUTCString()，与toGMTString()方法等价

日期相关的方法

特别注意，日期中的月份都是从0开始的。下面的方法也是如此。

  • getTime()，返回表示日期的毫秒数；与valueOf()返回值相同
  • getMonth()，略。还有返回getFullYear、getDate、getHours、getMinutes、getSeconds、getMilliseconds等。
  • setMonth()，略。可以set的也同上。

Web计时

Web Timing API让开发人员通过JavaScript就能使用浏览器内部的度量结果，从而进行分析。通过浏览器开始请求页面的时间、发生load事件的时间等一系列过程的时间值，就可以知道哪些阶段可能是影响性能的瓶颈的。当然，也可以使用chrome的强大的调试工具，这是一种非常方便的方法。该API不再进行内容介绍。