JavaScript---定时器、延时器

一、js 定时器有两种方法：

第一种： Setinterval() :

　　　　含义：按照指定的周期，(以毫秒计)，来调用函数或计算表达式

　过程：这个方法会不停地调用函数，一直到停止或者关闭它

　　　　返回值：返回的 ID 值可用作关闭（clearInterval()）方法的参数

　　　　对应方法 Setinterval() : clearInterval()；

　　格式：setInterval(code,millisec)

　　　　　Code 要调用的代码块或者函数

　　　　　Millisec 周期性执行代码块或函数的间隔，以毫秒计

setInterval(function(){},1000)； //相隔一秒持续执行， function(){} //持续执行function()里面的操作。

clearInterval(); //实现关闭

　　案例：首先实现一个不进行关闭的效果

 1 <head> // 这个最终实现效果是： 每个一秒就让 num 这个值进行加一。
 2         <meta charset="utf-8">
 3         <title></title>
 4         <script type="text/javascript">
 5             window.onload = function(){
 6                 var num = 0;  //首先要明白 参数一是一个一直不断的执行，如果把  num 定义放在后面的话，就会一直是0
 7                 setInterval(function(){   //穿的两个参数，一个是你要执行的代码块，一个是相隔多少秒
 8                     document.write(num++);  
 9                 },1000)
10             }
11         </script>
12     </head>
13     <body>
14     </body>

　　案例2：实现两个方法相互对应操作。

 1 <head>
 2         <meta charset="utf-8">
 3         <title></title>
 4         <style type="text/css">
 5             #id{
 6                 height: 150px;
 7                 width: 150px;
 8                 background-color: #D2691E;
 9             }
10         </style>
11         <!-- -->
12         <script type="text/javascript">
13             window.onload = function(){
14                 var oId = document.getElementById('id');
15                 var isBlack = false; // 设置一开始是关闭的
16                 var zhixing = null;
17                 function coleRomde(){
18                     oId.style.background = "rgb(" + parseInt(Math.random()*255+1) + "," + parseInt(Math.random()*255+1) + "," +parseInt(Math.random()*255+1)+")";
19                     console.log(oId.style.background);
20                 }
21                 oId.onclick = function(){
22                     if(isBlack){
23                         zhixing = setInterval(function(){
24                             coleRomde();
25                         },1000)
26                         isBlack = false;
27                     }else{
28                         /* 首先一开始是false，所以就会先执行这个false */
29                         clearInterval(zhixing); 
30                         isBlack = true;       //当一开始给isBlsck设置为false，所以就要先进行执行这个关闭，
31                         /* 关闭之后 把那个属性改为 true ，然后进行执行if()里面的代码 */
32                     }
33                 }
34                 
35             }
36         </script>
37     </head>
38     <body>
39         <div id = "id"></div>
40     </body>

二、延时器：SetTimeout():在指定的毫秒数后函数或计算表达式

 1 <head>
 2         <meta charset="utf-8">
 3         <title></title>
 4         <!-- <script src="../js/public.js" type="text/javascript" charset="utf-8"></script> -->
 5         <script type="text/javascript">
 6             window.onload = function(){
 7                 var i = 1;
 8                 function yanShi(){
 9                     document.write(i++)
10                 }
11                 var timer = setInterval(function(){
12                     yanShi();
13                 },1000)
14                 
15                 setTimeout(function(){  //延迟
16                     clearInterval(timer); //  2秒关闭这个定时器
17                 },2000)
18             }
19         </script>
20     </head>
21     <body>
22         <div id="id"></div>
23     </body>

var expireMilliseconds = 0; 		// 过期时间对应的毫秒数
	var timer = null;
	// 倒计时函数
function countDown() {
	timer = setInterval(function() {
		var date = new Date();
		var milliseSeconds = date.getTime();
		if(milliseSeconds > expireMilliseconds) { 
			alert('订单过期'); 
			clearInterval(timer);
		} else {
			var timesler = expireMilliseconds - milliseSeconds;
			var minutes =  Math.floor(timesler / (60 * 1000));
			document.querySelector('span.minute').innerText = minutes;
			var seconds = Math.floor(timesler % ( 60 * 1000 ) / 1000);
			document.querySelector('span.second').innerText = seconds;
			// Math.floor()	// 向下取整
			// Math.ceil()		// 向上取整
			// Math.round()	// 四舍五入
		}
	}, 1000);				
}

function time() {
	var date = new Date();					// 获取当前时间对象
	var spanMilliseconds = 60 * 60 * 1000;  // 订单付款有效时间跨度(毫秒)
	// 算出点击按钮生成订单一瞬间过期时间对应的毫秒数
	expireMilliseconds = date.getTime() + spanMilliseconds;
	countDown();
}
time();

JavaScript---定时器、延时器

推荐阅读