JavaScript之定时器

JavaScript 计时事件
程序的执行速度是非常非常快的,如果希望一段程序，可以每间隔一段时间执行一次,通过使用 JavaScript，我们有能力做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。
在 JavaScritp 中使用计时事件是很容易的，两个关键方法是:
setInterval()间隔指定的毫秒数不停地执行指定的代码。（定时调用）
setTimeout() 在指定的毫秒数后执行指定代码。（延时调用）
注意: setInterval() 和 setTimeout() 是 HTML DOM Window对象的两个方法。使用window对象的方法时可以不写window。

setInterval() 方法
setInterval() 间隔指定的毫秒数不停地执行指定的代码
语法：
window.setInterval("javascript function",milliseconds);
参数：
1.回调函数，该函数会每隔一段时间被调用一次
2.每次调用间隔的时间，单位是毫秒 1000毫秒等于1秒

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script>
window.onload =function(){
    var www =document.getElementById("one");
    var num=0;
 var time = setInterval(
    function number(){
    one.innerHTML=" 时间已经过去了"+ num++ +"秒";
    }
    ,1000);

}
  </script>
 </head>
 <body>
  <h1 id="one"></h1>
 </body>
</html>

从0开始每隔一秒加1，在屏幕中输出

那么如果想停止执行代码呢
clearInterval() 方法用于停止 setInterval() 方法执行的函数代码。

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script>
window.onload =function(){
    var www =document.getElementById("one");
    var num=0;
    var time =setInterval(
    function number(){
    one.innerHTML=" 时间已经过去了"+ num++ +"秒";


    if(num == 11){//当num等于10的时候
                        //关闭定时器
        clearInterval(time);
    }

    }
    ,1000);

}
  </script>
 </head>
 <body>
  <h1 id="one"></h1>
 </body>
</html>

效果

延时调用 setTimeout()
延时调用一个函数不马上执行，而是隔一段时间以后在执行，而且只会执行一次
延时调用和定时调用的区别，定时调用会执行多次，而延时调用只会执行一次

<body>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
    setTimeout(function(){alert("Hello")},3000);
}
</script>

</body>  //点击按钮后三秒 出现弹窗

<body>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
    setInterval(function(){alert("Hello")},3000);
}
</script>

</body>//点击按钮后 每隔3秒出现弹窗

clearTimeout() 方法用于停止执行setTimeout()方法的函数代码
要使用clearTimeout() 方法, 必须在创建方法（setTimeout）使用全局变量
myVar=setTimeout("javascript function",milliseconds);

JavaScript之定时器

推荐阅读更多精彩内容