JavaScript事件添加定时器

一日不见，如隔三秋
我还是你们熟悉的——
世界上有两种东西，是无法挽回的，一种是过去的时间，另一种就是说过的话。
丰富自己比取悦他人更有力量：种下梧桐树，引得凤凰来。你若盛开，蝴蝶自来，你若精彩，天自安排！

方便参考，整合了前面一下。学习就要一步一个脚印，不急不躁，循序渐进。

上次写的那一篇英雄联盟轮播图逻辑，总工程量还是有一点大
并且好多都是重复代码，有人反馈小陈陈还有没有一种更简单，
更高效的，更省时省力的方法呢？事实证明有的（??）今天通过这篇事件添加定时器，聊聊具体简化思路

</head>
<body>
    <button id="bt1">终止输出hello world</button>
    <button id="bt2">重启t1</button>

setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

定时器:每隔一段时间,自动执行某些功能

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


 var t1= setInterval(function(){
         console.log("hello world")
     },3000)    // 时间:时间通用的单位：毫秒1s=3000ms

在这里插入图片描述

方便对比效果，我们再写一个:明天你好

需求：每间隔3s,在控制台输出一行明天你好

 var t2= setInterval(function(){
         console.log("明天你好")
     },3000)

在这里插入图片描述

细心的大朋友们可能发现了一个小问题helloworld和明天你好的程序从一开始一直在重复循环输出没有结束过一次，当然我们也可以换种说法说：当我们使用某东某宝购物平台的时候，我们会发现最上面的虚拟实物展示轮播图（假如你此时看中了一款香水，想要详细了解一下的时候，原来的香水图片自动轮播过去换成了下一张烧鸡的图片???）心中一万个草泥马路过??

在这里插入图片描述

综上所述，我们是否可以通过一种方法不让当前的香水页面自动轮播过去换成下一个页面(停止helloworld/明天你好)

我们可以声明一个变量,命名为bt1终止输出hello world
清除输出hello world定时器

 <button id="bt1">终止输出hello world</button>


   var bt1=document.getElementById("bt1") 
     bt1.onclick=function(){
         
         clearInterval(t1)
     }

在这里插入图片描述

看了一眼钱包（3块9）,再对比一下香水的价格39999，想了想还是算了吧，忽然想到那个烧鸡页面（嘿嘿嘿）,想买之前的烧鸡（当前停留在香水页面，如何让轮播显示过去的烧鸡页面），我们怎么该怎么办呢？

我们可以再声明一个变量,命名为bt2重启hello world
让hello world重新启动

  <button id="bt2">重启t1</button>


var bt2=document.getElementById("bt2")
 bt2.onclick=function(){
     t1=setInterval(function(){
         console.log("hello world")
     },3000) //时间:时间通用的单位：毫秒1s=3000ms
 }

先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。深知大多数初中级java工程师，想要升技能，往往是需要自己摸索成长或是报班学习，但对于培训机构动则近万元的学费，着实压力不小。自己不成体系的自学效率很低又漫长，而且容易碰到天花板技术停止不前。因此我收集了一份《java开发全套学习资料》送给大家，初衷也很简单，就是希望帮助到想自学又不知道该从何学起的朋友，同时减轻大家的负担。添加下方名片，即可获取全套学习资料哦

JavaScript事件添加定时器

猜你喜欢