js中的setTimeout和setInterval
在最近做的一个叫入职帮帮 项目中，需要大量的及节点增删操作，稳定性和效果都在要求当中。在快要收尾的时候遇到一个问题，一个节点slideUp()之后实际上并没有删除，必须remove()，但是为了保持效果，采取了先隐藏在删除的做法，这里面就需要用到了setTimeout()这个方法，现在来总结一下js中setTimeout和setInterval这两个看似比较容易混淆的方法。
首先讲的是setTimeout()
官方定义：setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式；
语法：setTimeout(code,milliseconds)括号里两个都是必须的参数（code:要调用的函数后要执行的 JavaScript 代码串；milliseconds:延迟的毫秒数）
需要注意的是：setTimeout() 只执行 code 一次。如果要多次调用，请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。
先看网上一个列子：
<html>
<head>
<script type="text/javascript">
function timedMsg(){
var t=setTimeout("alert('5 seconds!')",5000)
}
</script>
</head>
<body>
<form>
<input type="button" value="Display timed alertbox!" onClick="timedMsg()">
</form>
<p>Click on the button above. An alert box will be displayed after 5 seconds.</p>
</body>
</html>
当按钮被点击的时候，过5秒钟之后会弹出提示框，单人我们在function当中也没有必要采用定义变量的方式，直接使用setTimeout也是正确的
与setTimeout()对应的有clearTimeout()这个方法
clearTimeout：
定义：clearTimeout() 方法可取消由 setTimeout() 方法设置的 timeout。
语法：clearTimeout(id_of_settimeout) 参数说明：id_of_settimeout由 setTimeout() 返回的 ID 值。该值标识要取消的延迟执行代码块。也可以理解这个方法值传进一个对象就可以
修改一下上面的列子：
<html>
<head>
<script type="text/javascript">var c = 0;
var t;
function timedMsg(){
document.getElementById("test").innerHTML = c;
c = c+1;
t=setTimeout("timedMsg()",1000)
}
function stopClock(){
clearTimeout(t);
}
</script>
</head>
<body>
<form>
<input type="button" value="Display timed alertbox!" onClick="timedMsg()">
<input type="button" value="stop the clock" onclick="stopClock()" />
</form>
<p id="test"></p>
</body>
</html>
点击第一个按钮 的时候会开始计时，当点击第二个按钮的 时候会调用clearTimeout()来清除设置的时间。
到现在大家可能有点明白了setTimeout()常用的功能了吧，除了延迟你要执行的代码块或者函数之外，还有定时和时钟的功能，上面更改的例子是通过setTimeout()不断调用同一个函数来实现计时的，并没有使用setInterval()；
好了，现在来讲一下setInterval():
定义：setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
语法：setInterval(code,millisec）用法和setTimeout一样，但是setInterval()多了一个可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的返回值。
同样以上面的计时为例子：
<html>
<head>
<script type="text/javascript">
var c = 0;
function timedMsg(){
document.getElementById("test").innerHTML = c;
c = c+1;
}
var test = window.setInterval("timedMsg()",1000);
function stopClock(){
clearInterval(test);
}
</script>
</head>
<body>
<form>
<input type="button" value="Display timed alertbox!" onClick="timedMsg()">
<input type="button" value="stop the clock" onclick="stopClock()" />
</form>
<p id="test"></p>
</body>
</html>
上面的用法比较简洁，可以多体会一下。
clearInterval()和clearTimeout()的用法相同。
讲到这这两个方法的基本用法都应该清楚了，欢迎路过的大神批评补充
