间歇调用和超时调用
发布于 2015-09-21
今天自己用原生js写了一个侧栏分享的小部件，其中用到的知识主要就是定时器，所以借此机会总结一下定时器的相关内容。
首先，定时器分为间歇调用定时器和超时调用定时器，两者之间很相似，命令基本一样。
间歇调用的代码：
//声明一个间歇定时器，并把ID赋值给intervalId。
var intervalId =setInterval(function(){
//执行代码
},1000);
//清除定时器
clearInterval(intervalId);超时定时器的代码：
//声明一个超时定时器，并把ID赋值给timeoutId。
var timeoutId = setTimeout(function(){
//执行代码
},1000);
//清除定时器
clearTimeout(timeoutId);说明：1.其中定时器第二个参数表示等待时间，以毫秒为单位。
2.每个定时器都会返回一个唯一ID，使用唯一ID来清除定时器。
其次，两者之间有一些区别。使用间歇调用的时候，代码的执行是重复的，在不使用clearInterval的情况下，会一直进行下去。在使用超时调用的时候，代码的执行是单次的，所以clearTimeout的使用不是必须的。
最后，在实际的使用中，因为javascript的运行是单线程的，所以代码的运行需要进行排队。在当前代码的运行时间大于定时器的时间间隔时，可能会出现间隔被跳过或者多个定时器之间的间隔比预期的要小，这样就会产生很多麻烦。所以，在设置间隔调用定时器的时候要在每次触发定时器之前，清除当前的定时器，来预防定时器错乱。当设置超时定时器时，可以使用链式调用的方法解决（如下）：
setTimeout(function(){
//执行代码
setTimeout(arguments.callee,1000);
},1000);
其中，《JS高程》建议，最佳实践是使用后面这种方式来设置重复定时器。但是，在我编写侧边分享模块的移入移出的时候，用后面的这种方式会出现像素移动的延迟，就是会多移动一段距离（也可能是我才疏学浅），所以我选择了间隔调用的方式。
