定时器

最新推荐文章于 2024-08-26 08:49:30 发布

原创最新推荐文章于 2024-08-26 08:49:30 发布 · 300 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

50 篇文章

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>定时器</title>
</head>
<body>
定时器有两种方式
setInterval() ：按照指定的周期（以毫秒计）来调用函数或计算表达式。方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。
setTimeout() ：在指定的毫秒数后调用函数或计算表达式。
关闭定时器
clearInterval()
clearTimeout()

<div>定时器默认是已经执行了，点击关闭即可停止</div>
<input type="button" value="开始" id="start" />
<input type="button" value="关闭" id="end" />

<input type="button" value="执行一次" id="demo" />
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
// 1.重复执行setInterval()
//大佬建议，不要用字符串传递第一个参数，直接函数名最好
//var t1 = window.setInterval("dingshiqi()", 1000);
var t1 = window.setInterval(dingshiqi, 1000);
$("#start").click(function () {
console.log("开始执行");
setInterval(dingshiqi, 1000);
});
$("#end").click(function () {
console.log("关闭定时器");
clearInterval(t1);
});

// 2.执行一次setTimeout()
$("#demo").click(function(){
setTimeout(closeDiv, 3000);
});
});
//之前纠结为什么有时候函数必须写在$(function(){})外面,刚刚大佬提醒,因为定时器是window对象
function dingshiqi() {
console.log("重复执行--------");
}
function closeDiv() {
alert("延迟3秒后出现了!");
}
</script>
</body>
</html>