您现在的位置是： 网站首页> 前端技术> JavaScript JavaScript
JavaScript 实现定时执行事件
Smile
2020-09-30
HTML
Javascript
阅读：1393
简介开发网页前端时常常有定时执行代码的需求，利用JavaScript的定时器函数，我们可以在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行，这样就实现了定时任务。
1、定时器相关函数
setInterval() - 间隔指定的毫秒数不停地执行指定的代码
clearInterval() - 用于停止setInterval()方法执行的函数代码
setTimeout() - 在指定的毫秒数后执行指定代码
clearTimeout() - 用于停止执行setTimeout()方法的函数代码
2、使用 setInterval() 实现一个时钟，显示当前时间
HTML代码
<!DOCTYPE html>
<html>
<head>
<title>JavaScript 实现定时执行事件</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div>
<p>当前时间是</p>
<p id="time"></p>
<button onclick="stopTime()">停止时钟</button>
</div>
</body>
</html>JavaScript代码
var nowTime = setInterval(showTime,1000);
// var nowTime = setInterval(function(){showTime()},1000);//匿名函数方式
function showTime()
{
var timeObj = new Date();
var t = timeObj.toLocaleTimeString();
document.getElementById("time").innerHTML = t;
}注：第一个参数是函数（function）。第二个参数间隔的毫秒数、
3、使用 clearInterval() 使时钟停下来
function stopTime(){
clearInterval(nowTime);
}注：要使用 clearInterval() 方法, 在创建计时方法时必须使用全局变量
4、使用 setTimeout() 实现等待3秒，然后弹出 "JavaScript"
setTimeout(function(){alert("JavaScript")},3000);5、使用 clearTimeout() 使弹窗停下来
HTML代码
<!DOCTYPE html>
<html>
<head>
<title>JavaScript 实现定时执行事件</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div>
<p>点击第一个按钮等待3秒后出现"JavaScript"弹框。</p>
<p>点击第二个按钮来阻止第一个函数运行。（你必须在3秒之前点击它）。</p>
<button onclick="start()">开始</button>
<button onclick="stop()">停止</button>
</div>
</body>
</html>JavaScript代码
var myAlert;
function start(){
myAlert = setTimeout(function(){alert("JavaScript")},3000);
}
function stop(){
clearTimeout(myAlert);
}很赞哦！ (0)
