JavaScript中的时间是通过定时器控制的，他们分别是window.setInterval和window.setTimeout，我们当然可以省略window，直接使用方法名称调用。
一 setTimeout
在等待指定的毫秒数后执行函数，语法如下：
setTimeout(code/function, milliseconds, param1, param2, ...)
方法接受2个或多个参数，第一个是一段JS代码或一个函数引用，第二个是需要等待的时间（以毫秒计），如果第一个参数是函数引用，并且需要传递参数，可以在后面依次传入。方法返回一个唯一id，代表该定时器，使用clearTimeout(id)可以清除定时器。
1 setTimeout(functon(){ 2 console.log(new Date()); 3 },3000); 4 console.log(new Date()); 5 //立即显示一次当前时间，3秒后又将显示一次
经测试发现：如果第一个参数是一段JS代码而非函数引用，该代码将立即被执行，而不会延时等待。
二 setInterval
等同于 setTimeout()，但持续重复执行该函数。语法如下：
setInterval(code/function, milliseconds, param1, param2, ...)
使用方法和setTimeout()相同。
1 function timer(){ 2 var d = new Date(); 3 document.body.innerText = d; 4 } 5 setInterval(timer,1000);
上面是一个简单的定时器示例。
另外，setInterval方法有一个严重的缺陷，那就是不能确保执行时间的准确性。
在执行setInterval()时，假如我们设置每1s执行一次函数，但函数执行一次需要花费2s。浏览器会每隔1s就向一个事件队列中添加一个事件（即执行一次函数），当第一次执行完毕（3s之后了），这时队列中已经有2个事件正在排队了，于是浏览器立即执行第二个事件（等待队列中的第一个）。这样明显和我们本意每1s执行一次函数不符。所以在setInterval中，与其说第二个参数是延时时间，不如说是每个事件执行的最大间隔时间更为准确。因为当事件执行时间大于设置的间隔时间时，两个任务执行之间是没有间隔时间的。
有些书上表示，到了设置的时间点，如果上一次的函数还没执行完，那么本次事件将不会被添加到事件队列中去，这次事件将被跳过，直到未来设置的某一时间点，前面的任务已经完成，才向队列中添加下一个事件。但浏览器实际上是按照第一种方式管理事件队列的，即到了时间不管前面的是否执行完毕，都插入一个进去，然后依次等待执行。（我用的Chrome 76.0.3869.100测试）
setInterval主要应用在绘制动画效果上，鉴于它对时间的不准确性，要想获得完美的动画效果请使用CSS3的Animation实现。另外，如果确实需要使用，请务必把握好间隔时间的设置。下面是使用setInterval封装的一个运动函数：
1 var timer; 2 function startMove(obj,json,Fn){ 3 var key; 4 clearInterval(timer); 5 timer = setInterval(function(){ 6 for(var prop in json){//json是一个包含需要改变的属性和目标值的对象。 7 var bridge; 8 if(prop == 'opacity'){ 9 bridge = getStyle(obj,prop)*100;//为了便于计算，先放大100倍 10 }else{ 11 bridge = parseInt(getStyle(obj,prop)); 12 } 13 var speed = (json[prop] - bridge)/6; 14 speed = speed > 0?Math.ceil(speed):Math.floor(speed);//这里为了获得更好的动画效果，动态设置了运动速度。你当然可以给一个常数作为运动速度 15 if(prop == 'opacity'){ 16 obj.style[prop] = (bridge + speed) / 100; 17 }else{ 18 obj.style[prop]= bridge + speed + 'px'; 19 } 20 if(bridge != json[prop]){ 21 key = false; 22 }else{ 23 key = true; 24 } 25 if(key){ 26 clearInterval(timer); 27 if(Fn)Fn();//当目标运动完成，执行回调函数 28 } 29 } 30 },30); 31 } 32 33 function getStyle(obj,prop){//获取css样式值 34 if(obj.currentStyle){ 35 return obj.currentStyle(prop); 36 }else{ 37 return getComputedStyle(obj,false)[prop]; 38 } 39 }
网上很多文章亦或是很多出版书籍都把这两个方法和DOM放在一起或者单独讲解，我想他们这么做的原因大概是这两个方法在JavaScript中主要应用在实现DOM元素的动画效果上。那么我为什么要把他们放在BOM里面讲呢？我们知道，JS的执行是单线程的，当代码运行到这两个方法时，理论上应该等待它绑定的代码执行完再往后执行其他代码，实际上他们并不会阻塞后面的代码，这又是为什么呢？原来每当遇到延时程序时，浏览器都会为它单独开启一个线程，换言之，他们的时间是由浏览器操纵的，而不是JavaScript。另一个明显的理由是这两个方法本来就是绑定在window对象上的，是由浏览器实现的，所以我把它放在BOM讲啦！