JavaScript 两种计时器_能够多次调用的计时器是-优快云博客

本文链接：https://blog.youkuaiyun.com/SmallXianNotImmortal/article/details/51149453

今天来看Windows对象的两种计时器。

window对象的计时器：

1.setTimeout(): 隔一段时间调用某个函数(只调用一次),返回的是一个计时器(理解成一个手表)
clearTimeout() ：销毁由setTimeout()产生的计时器

2.setInterval(): 每隔一段时间调用某个函数(多次调用)
clearInterval(): 销毁由setInterval()产生的计时器

它们两个的区别使用，代码如下，同时实现页面数字从100开始的递减：

用setTimeout()实现：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  
  <title>Document</title>
 </head>
  
 <body>
 <p id ="txt">100</p>

 <button οnclick="delOne()"> 开始递减</button>
 <button οnclick="pause()">递减暂停</button>
 
 <script type="text/javascript">
  <!--
	var p =document.getElementById("txt");

	var num = p.innerHTML;

    var t;

	function delOne (){

		num = num*1 -1;

        p.innerHTML=num+"";

		t=setTimeout("delOne()",1000);
		
	}

	function pause (){
        
		clearTimeout(t);
	}
	
  //-->
  </script>
 </body>
</html>

用setInterval()实现：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  
  <title>Document</title>
 </head>
  
 <body>
 <p id ="txt">100</p>

 <button οnclick="del()"> 开始递减</button>
 <button οnclick="pause()">递减暂停</button>
 
 <script type="text/javascript">
  <!--
	var p =document.getElementById("txt");

	var num = p.innerHTML;

    var t;

	function delOne (){

		num = num*1 -1;

        p.innerHTML=num+"";

		
		
	}

	function del(){
       t=setInterval("delOne()",1000);
	}

	function pause (){
        
		clearInterval(t);
	}
	
  //-->
  </script>
 </body>
</html>

先解决心情，再解决事情。