您现在的位置是:首页 > Javascript
当前栏目
【javascript编程思维】间隔性与延时性定时器的区别 , 如何停止定时器?
2023-04-18 15:53:48 时间
间隔性与延时性定时器的区别
间隔型定时器 setInterval(fun,time)
- fun为执⾏的函数
- time为间隔执⾏的时间,单位为毫秒,每过time时间就执⾏⼀次fun⾥⾯的代码
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#tim{
width: 100px;
height: 100px;
background: red;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="tim" ></div>
<script type="text/javascript">
// 间隔性性定时器 setInterval 每间隔三秒会执行一次
setInterval(function(){
alert("我是延时3秒执行的弹窗")
console.log(1) //控制台每个3秒输出1
},3000)
</script>
</body>
</html>
延时型定时器 setTimeout(fun,time)
- fun为执⾏的函数
- time为延时执⾏的时间,单位为毫秒,经过time时间后执⾏fun代码,只执⾏⼀次
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#tim{
width: 100px;
height: 100px;
background: red;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="tim" ></div>
<script type="text/javascript">
// 延时性定时器 setTimeout 只会执行一次
setTimeout(function(){
alert("我是延时3秒执行的弹窗")
},3000)
</script>
</body>
</html>
三秒后出现:
如何停止定时器
clearInterval 清除间隔性定时器
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#tim{
width: 100px;
height: 100px;
background: red;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="tim" ></div>
<script type="text/javascript">
// 清除定时器
var timer1=setInterval(function(){
console.log("我是间隔性定时器")
#time为延时执⾏的时间,单位为毫秒,经过time时间后执⾏fun代码,只执⾏⼀次
},1000)
var timer2=setTimeout(function(){
console.log("我是延时性定时器")
clearInterval(timer1)
#执行了两次间隔性之后间隔性输出停止,这里在延时性里面把间隔性清除了,这里延时性输出一次后也不再输出
},2000)
</script>
</body>
</html>
clearTimeout 清除延时性定时器(就是当这个延时性的定时器,在它的延时的时间还没到的时候,我这里执行到了一些代码做了判断,已经执行了这些代码,并且你不想在执行这个定时器的时候)
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#tim{
width: 100px;
height: 100px;
background: red;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="tim" ></div>
<script type="text/javascript">
// 清除定时器
var timer1=setInterval(function(){
console.log("我是间隔性定时器")
clearTimeout(timer2)
// 本来的输出是一秒输出一次间隔性,2秒一次延时性,这里清除了延时性后下面的延时性不输出,间隔性继续输出
},1000)
var timer2=setTimeout(function(){
console.log("我是延时性定时器")
},2000)
</script>
</body>
</html>
相关文章
- 前端面试 【JavaScript】— typeof 是否能正确判断类型?
- 前端面试 【JavaScript】— instanceof 能否判断基本数据类型?
- 前端面试 【JavaScript】— 能不能手动实现一下 instanceof 的功能?
- 前端面试 【JavaScript】— Object.is和=== 有什么区别?
- 前端面试 【JavaScript】— JS中类型转换有哪几种?
- 前端面试 【JavaScript】— == 和 ===有什么区别?
- 前端面试 【JavaScript】— 对象转原始类型是根据什么流程运行的?
- JavaScript 的 parseInt() 函数
- javascript实现两个数字进行组合
- JS监听键盘按键
- 大前端开发中的路由管理之五:Flutter篇
- Javascript的DOM操作
- 在Vue项目中使用WebSocket技术
- 新手向:前端程序员必学基本技能——调试JS代码
- React 毁了 Web 开发!
- 「JS 逆向百例」cnki 学术翻译 AES 加密分析
- 商标注册域名后缀用什么?商标和域名有哪些区别?
- 网站建设流程是怎样的?需要看重哪些细节?
- 网站域名商标注册流程是什么?网站域名商标有什么用?
- 如何建设一个实用性强的网站 网站上线后如何运营