【js】setInterval动态改变定时器时间周期，三次点击事件，时间间隔内只捕捉一次点击事件...

最新推荐文章于 2024-08-26 18:02:18 发布

aoayyu826824

最新推荐文章于 2024-08-26 18:02:18 发布

阅读量914

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/carsonwuu/p/9120994.html

版权

本文介绍了如何使用JavaScript实现setInterval动态改变时间间隔，从500ms到2s或5s，并在设定的时间间隔内只响应一次点击事件，详细解释了项目的目标、效果和实现步骤。

摘要由CSDN通过智能技术生成

setInterval动态改变定时器时间周期，三次点击事件，时间间隔内只捕捉一次点击事件

一、目标：

setInterval初始时间间隔为500ms，动态更改为2s/5s/暂停。

二、效果（//gif,如果看到的是静态的png，你该去换台能看动图的电脑。手动滑稽-。-）

三、实现：

1.动态改变计时器时间周期。

 1 var t=setInterval(change,timer);
 2 
 3 function change(){
 4     $('#t1').click(function(){
 5         timer=2000;
 6         clearInterval(t);
 7         t=setInterval(change,timer);
 8     });
 9     $('#t2').click(function(){
10         timer=5000;
11         clearInterval(t);
12         t=setInterval(change,timer);
13     });
14     $('#t3').click(function(){
15         timer=5000;
16         clearInterval(t);
17         //t=setInterval(change,timer);
18     });
19     document.getElementById('container').innerHTML=index ;
20     index++;
21 }

2.三次点击事件（setTimeout）

 1     var count = 0, timer;
 2     $('#three').click(function(){
 3         console.log("click");
 4         if(count < 2){
 5             if(timer){
 6                 clearTimeout(timer);
 7             }
 8             count ++;
 9             timer = setTimeout(function(){
10                 count = 0;
11             }, 500);
12         }
13         else if(count === 2){
14             count = 0;
15             clearTimeout(timer);
16             threeClick();
17         }
18     });
19     function threeClick(){
20         alert('three click');