JavaScript 之 定时器

Posted 2022-09-18 niujifei

　　javascript 里面有两个定时器：setTimeout() 和 setInterval() 。

　　区别：

　　　　setTimeout()：相当于一个定时炸弹，隔一段时间执行，并且只会执行一次就不在执行了。

　　　　setInterval()： 相当于一个闹钟，隔一段时间执行，并且会重复执行。

一、setTimeout()

　　1、设置定时器（倒计时）

　　　　语法格式：

setTimeout(function() ,时间)；

　　　　    这个函数需要两个参数：

　　　　　　第一个参数是到时间后需要执行的函数，可以是匿名函数，也可以是命名函数；

　　　　　　第二个参数是时间间隔，单位为毫秒（ms）。

　　　　Demo：

1 btn.onclick = function() 
2   setTimeout(function()
3        alert("hello world");  
4     ,3000);  
5     

 

　　　　当点击按钮3秒后，页面弹出 “hello world” 的对话框。

　　2、取消定时器（倒计时）

　　　　语法格式：

var  timerId = setTimeout(function(), 时间间隔);
clearTimeout(timerId);

　　　　声明定时器时会有一个返回值，是一个整数，即当前这个定时器的 标识。

　　　  在执行 clearTimeout() 这个函数时，在里面传入对应的 定时器的标识 即可取消当前的定时器。

二、setInterval()

　　1、设置定时器

　　　　语法格式：

setInterval(function(),时间间隔);

　　　　　这个函数需要两个参数：

　　　　　　第一个参数是到时间后需要执行的函数，可以是匿名函数，也可以是命名函数；

　　　　　　第二个参数是时间间隔，单位为毫秒（ms）。

　　2、取消定时器

　　　　　语法格式：

var  timerId = setInterval(function(), 时间间隔);
clearInterval(timerId);

　　　　  声明定时器时会有一个返回值，是一个整数，即当前这个定时器的 标识。

　　　  在执行 clearTimeout() 这个函数时，在里面传入对应的 定时器的标识 即可取消当前的定时器。

　　  Demo：距离2019年11月11日倒计时

 1  // 结构
 2  <h1 class="title">距离光棍节，还有</h1>
 3   
 4   <div class="time-item">
 5     <span><span id="day">00</span>天</span>
 6     <strong><span id="hour">00</span>时</strong>
 7     <strong><span id="minute">00</span>分</strong>
 8     <strong><span id="second">00</span>秒</strong>
 9   </div>
10 
11 <script>
12     // 目标时间
13     var endDate = new Date(‘2019-11-11 0:0:0‘);
14     // 获取 span
15     var spanDay = document.getElementById(‘day‘);
16     var spanHour = document.getElementById(‘hour‘);
17     var spanMinute = document.getElementById(‘minute‘);
18     var spanSecond = document.getElementById(‘second‘);
19 
20     countdown();
21     setInterval(countdown, 1000);
22 
23     // 倒计时
24     function countdown() 
25 
26       // 计算时间差
27       // 当前时间
28       var startDate = new Date();
29       // 计算两个日期差
30       var interval = getInterval(startDate, endDate);
31 
32       setInnerText(spanDay, interval.day);
33       setInnerText(spanHour, interval.hour);
34       setInnerText(spanMinute, interval.minute);
35       setInnerText(spanSecond, interval.second);
36 
37     
38     
39  // 获取两个日期的时间差
40 function getInterval(start, end) 
41   // 两个日期对象，相差的毫秒数
42   var interval = end - start;
43   // 求 相差的天数/小时数/分钟数/秒数
44   var day, hour, minute, second;
45 
46   // 两个日期对象，相差的秒数
47   // interval = interval / 1000;
48   interval /= 1000;
49 
50   day = Math.round(interval / 60 / 60 / 24);
51   hour = Math.round(interval / 60 / 60 % 24);
52   minute = Math.round(interval / 60 % 60);
53   second = Math.round(interval % 60);
54 
55   return 
56     day: day,
57     hour: hour,
58     minute: minute,
59     second: second
60   
61 
62 
63 </script>