您现在的位置是: 网站首页> 前端技术> JavaScript JavaScript

JavaScript 实现定时执行事件

Smile 2020-09-30 HTML Javascript 阅读:172

简介开发网页前端时常常有定时执行代码的需求,利用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)

文章评论

站点信息