js之定时器

编程小小小小小白白

于 2022-05-22 08:35:59 发布

阅读量270

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.youkuaiyun.com/m0_67932301/article/details/124906505

版权

本文介绍了如何使用JavaScript的setInterval实现定时任务，例如每隔3秒在控制台打印'helloworld'和'你好世界'。同时，展示了如何通过onmouseenter和onmouseleave事件来启动和停止定时器。通过定义变量t1并用clearInterval清除特定定时器，实现了鼠标进入时停止第一个定时器，离开时重新启动的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.定时器：每间隔一段时间，自动执行某些功能

需求：每间隔3s,在控制台输出hello world

setInterval(function(){执行内容},时间)，时间通过毫秒计算

1秒=1000毫秒

<script>
    setInterval(function(){
    console.log("hello world")
},3000)

 setInterval(function(){
    console.log("你好 世界")
},3000)
//一个页面中可以有多个定时器
</script>

停止指定的某一个定时器，在定时器前定义一个变量

清除定时器：clearInterval(清除的名字)

例：当鼠标进入时，第一个定时器停止

<script>
   var t1= setInterval(function(){
    console.log("hello world")
},3000)//定义一个变量

 setInterval(function(){
    console.log("你好 世界")
},3000)

banner.onmouseenter=function(){
    clearInterval(t1)
}
</script>

重启定时器，与第一段代码一样

<script>
   var t1= setInterval(function(){
    console.log("hello world")
},3000)//定义一个变量

 setInterval(function(){
    console.log("你好 世界")
},3000)

banner.onmouseenter=function(){
    clearInterval(t1)
}
banner.onmoseleave=function(){
    t1= setInterval(function(){
    console.log("hello world")
},3000)
}
</script>