• setInterval() - 间隔指定的毫秒数不停地执行指定的代码。
  • setTimeout() - 在指定的毫秒数后执行指定代码。

定时器

1.png
window.setInterval("javascript function",milliseconds);
window.setInterval()方法可以不使用 window 前缀，直接使用函数setInterval()。
setInterval() 第一个参数是函数（function）。
第二个参数为间隔的毫秒数

演示：

  1. <body>  
  2.     <script>
  3.         var a = 0;
  4.         setInterval(function(){
  5.             console.log(a++);
  6.         },1000);
  7.     </script>
  8. </body>

1.gif

2.png
3.png

停止执行

4.png
window.clearInterval(intervalVariable)
window.clearInterval()方法可以不使用window前缀，直接使用函数clearInterval()。
要使用 clearInterval() 方法, 在创建计时方法时你必须使用全局变量：
myVar=setInterval("javascript function",milliseconds);
然后你可以使用 clearInterval() 方法来停止执行。

演示：

  1. <body>  
  2.     <h1 id="info">0</h1>
  3.     <button id="btn1">开始</button>
  4.     <button id="btn2">暂停</button>
  5.     <script>
  6.         var oInfo = document.getElementById('info');
  7.         var oBtn1 = document.getElementById('btn1');
  8.         var oBtn2 = document.getElementById('btn2');
  10.         var a = 0;
  11.         var timer = null;
  12.         oBtn1.onclick = function(){
  13.             timer = setInterval(function(){
  14.             oInfo.innerText = ++a;
  15.             },1000);
  16.         };
  17.         oBtn2.onclick = function() {
  18.             clearInterval(timer);
  19.         };
  20.     </script>
  21. </body>

1.gif

但是这样有一个bug，就是用户如果疯狂点击按钮会叠加，也就是每点击一次就创建一个定时器实例，这样的话多个定时器会同时工作，同时计时，那么变量自增则是好几个函数在使其自增
1.gif

解决此问题的办法就可以在此之前就清除定时器

  1. oBtn1.onclick = function(){
  2.             clearInterval(timer)
  3.   .......
  4. }

延时器

2.png
也是可以不加window前缀
setTimeout(code, milliseconds, param1, param2, …)
setTimeout(function, milliseconds, param1, param2, …)

参数 描述
code/function 必需。要调用一个代码串，也可以是一个函数。
milliseconds 可选。执行或调用 code/function 需要等待的时间，以毫秒计。默认为 0。
param1, param2, … 可选。 传给执行函数的其他参数（IE9 及其更早版本不支持该参数）。
返回值: 返回一个 ID（数字），可以将这个ID传递给 clearTimeout() 来取消执行。

3.png

初步了解异步

1.png
2.png