首页 | 编程 | Java

JavaScript定时器使用方法详解

2020年03月26日 作者：maidu_xbd原文

本文实例为大家分享了JavaScript定时器使用的具体代码，供大家参考，具体内容如下

定时器分类

1、循环执行：一段程序能够每间隔一段时间执行一次【setInterval()】【clearInterval()】

2、定时执行（一次定时器）：某一段程序需要在延迟多少时间后执行【setTimeout()】【clearTimeout()】

定时器使用

使用注意：为了防止定时器累加，使用定时器要先清除后设置；要保证内存中只有一个定时器。

1、循环执行：一段程序能够每间隔一段时间执行一次

设置定时器：【var timeid = window.setInterval（“方法名或方法”，“延时”）;】
清除定时器【window.clearInterval(timeid);】

 // window.setInterval("console.log('1秒打印一次')", 1000); 
 
 // setInterval(function() {
 // console.log('1秒打印一次');
 // }, 1000);
 
 
 function test() {
 console.log('1秒打印一次');
 }
 
 setInterval(test, 2000);

示例1：秒表计时

<!DOCTYPE html>
<html lang="en">
 
<head>
 <meta charset="UTF-8">
 <title>定时器-放假倒计时</title>
 <style>
 #time {
 font-size: 30px;
 color: blue;
 text-align: center;
 }
 </style>
</head>
 
<body>
 <div id="time"></div>
 <script>
 window.onload = function() {
 // 1.获取需要的标签
 var time = document.getElementById('time');
 
 // 2. 自定义将来的时间
 var nextDate = new Date('2019/10/18 17:30:00');
 
 // 3. 开启定时器
 setInterval(function() {
 // 4. 获取现在的时间
 var currentDate = new Date();
 
 // 5. 获取时间戳
 var currentTime = currentDate.getTime();
 var nextTime = nextDate.getTime();
 
 // 6. 剩下的时间戳
 var allTime = nextTime - currentTime;
 
 // 7. 把毫秒转成秒
 var allSecond = parseInt(allTime / 1000);
 
 // 8.转化
 var d = size(parseInt(allSecond / 3600 / 24));
 var h = size(parseInt(allSecond / 3600 % 24));
 var m = size(parseInt(allSecond / 60 % 60));
 var s = size(parseInt(allSecond % 60));
 
 // 9. 注入
 time.innerText = "距离放假还有" + d + "天" + h + "小时" + m + "分钟" + s + "秒";
 }, 1000);
 
 
 // 时间显示处理
 function size(num) {
 return num >= 10 ? num : '0' + num;
 }
 }
 </script>
</body>
 
</html>

注意：把总的秒数（allSecond）转化为 天(d)+时(h)+分(m)+秒(s)的形式，公式如下

d=parseInt(allSecond / 3600 / 24)

h=parseInt(allSecond / 3600 %24)

m=parseInt(allSecond / 60 %60)

s=parseInt(allSecond%60)

示例3：时钟

min.style.transform = 'rotate(' + m * 6 + 'deg)';
second.style.transform = 'rotate(' + s * 6 + 'deg)';

2、定时执行：某一段程序需要在延迟多少时间后执行

设置定时器：【var timeid = window.setTimeout(“方法名或方法”, “延时”);】
清除定时器：【window.clearTimeout(timeid);】

示例

<!DOCTYPE html>
<html lang="en">
 
<head>
 <meta charset="UTF-8">
 <title>定时器</title>
</head>
 
<body>
 <button id="btn1">5秒后执行弹出对话框</button>
 <button id="btn2">停止</button>
 <script>
 window.onload = function() {
 // 1. 获取需要的标签
 var btn1 = document.getElementById("btn1");
 var btn2 = document.getElementById("btn2");
 var timer = null;
 
 // 2. 监听按钮的点击
 btn1.onclick = function() {
 clearTimeout(timer);
 // 一次定时器
 timer = setTimeout(function() {
 alert('5秒后执行弹出对话框');
 }, 5000);
 };
 
 btn2.onclick = function() {
 clearTimeout(timer);
 }
 }
 </script>
</body>
 
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持来客网。

相关链接