JavaScript的setInterval和setTimeout

1.使用setInteval添加会动的时间

setInterval是浏览器顶层对象window的直属方法，调用时可以使用 window.setInterval() 或 setInterval()。

window.setInterval(func[,delay[,val1,val2,…]]) 以一定间隔时间重复执行函数

func参数：需要间隔执行的函数；

delay参数：可选的，默认1000，单位是毫秒，如果设置为5000即为5秒执行一次；

val1,val2,…参数：可选的，可以有多个，是需要传递个func函数调用的参数，示例：

// 页面中包含一个 p 标签，且 id="myClock"
// <p id="myClock"></p>

// 以下是JS代码
// 使用id获取DOM元素p的引用
var p = window.document.getElementById("myClock");
// 注意这里调用setTime函数方式，直接使用函数名，并且不加括号
// func = setTime 要间隔执行的函数名
// delay = 1000 每1秒执行一次
// val1 = p 将p作为参数给setTime使用
var intervalID = window.setInterval(setTime,,p);
function setTime(container){
    var d = new Date();
    var d_format = d.getFullYear() + "-" + (d.getMonth() + ) + "-" + d.getDate() + " " 
        + d.getHours() + ":" 
        + (d.getMinutes() < ? "0" + d.getMinutes(): d.getMinutes()) + ":" 
        + (d.getSeconds() < ? "0" + d.getSeconds(): d.getSeconds());
    container.innerHTML = d_format;
}
           

运行效果：

clearInterval(id) 该方法清除id指定的setInterval方法，示例：

// 在网页中运行上一个示例的代码，但想停止时间的走动的话，就可以
window.clearInterval(intervalID);
// 如果不指定setInterval的引用表量名的，将无法停止
           

该方法不推荐使用，因为如果func指定的函数执行时间大于delay指定的间隔时间，将可能同时有多个func函数在运行，可能会产生不可控制的结果。

2.使用setTimeOut添加会动的时间

setTimeout也是浏览器顶层对象window的直属方法，调用时可以使用 window.setTimeout() 或 setTimeout()。

window.setTimeout(func[,delay[,val1,val2,…]]) 以一定延迟时间执行一次函数

func参数：需要延迟执行的函数；

delay参数：可选的，默认1000，单位是毫秒，如果设置为5000即为5秒之后延迟执行；

val1,val2,…参数：可选的，可以有多个，是需要传递个func函数调用的参数，示例：

// 页面中包含一个 p 标签，且 id="myClock"
// <p id="myClock"></p>

// 以下是JS代码
// 使用id获取DOM元素p的引用
var p = window.document.getElementById("myClock");
var t = null;
function setTime(container){
    var d = new Date();
    var d_format = d.getFullYear() + "-" + (d.getMonth() + ) + "-" + d.getDate() + " " 
        + d.getHours() + ":" 
        + (d.getMinutes() < ? "0" + d.getMinutes(): d.getMinutes()) + ":" 
        + (d.getSeconds() < ? "0" + d.getSeconds(): d.getSeconds());
    container.innerHTML = d_format;
    // 注意这里的调用
    t = window.setTimeout(setTime,,p);
}
// 这里需要首先调用一次setTime函数
setTime(p);
           

运行效果：

注意那个小写 t，每次调用给它重新赋值一次setTimeout，但记得要放在函数最后，这样就可以每次延迟1秒执行这个函数，并且延迟调用本质上是串行调用，即上一次执行完成之后才会开始下一次，不会出现因为函数执行时间过长而出现并行执行的情况。

可以使用clearTimeout(id)停止它，示例：

clearTimeout(t);