zoukankan      html  css  js  c++  java
  • 【js】setInterval动态改变定时器时间周期,三次点击事件,时间间隔内只捕捉一次点击事件

    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');
    21     }

    3.时间间隔内只捕捉一次点击事件(setTimeout)

     1 var timeoutflag = null;
     2       $('#clickOne').click(function() {
     3         if(timeoutflag != null){
     4           clearTimeout(timeoutflag);
     5         }
     6  
     7           timeoutflag=setTimeout(function(){
     8             dosomething();
     9           },1000);
    10          
    11       });
    12   
    13      function dosomething(){
    14         alert(1);
    15     }

    四、完整项目

      1 <!DOCTYPE html>  
      2 <html>
      3 <head>  
      4 <!--meta name="viewport" content="initial-scale=1.0, user-scalable=no" /-->  
      5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
      6 <title>动态改变定时器的周期</title>  
      7 <style type="text/css">  
      8 html{height:100%}  
      9 body{width:60%;height:100%;margin:0px auto;padding:0px}  
     10 #container{height:5%}  
     11 </style>  
     12 <!-- <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=BMgnVpFhGSH7GE8l7qnWhESkeCr12n9v"> -->
     13 <!-- //v2.0版本的引用方式:src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥" -->
     14 <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
     15 </script>
     16 
     17 </head>  
     18  <script>
     19      window.index=6;
     20  </script>
     21 
     22 <body>
     23 <p style='color:gray'>周期定时器,初始化周期为500ms</p>  
     24 <div id="container"></div>
     25 <button id='t1'>2s</button> 
     26 <button id='t2'>5s</button> 
     27 <button id='t3'>暂停</button> 
     28 
     29 <button id="three">clickThree</button>
     30 <button id="clickOne">clickOne</button>
     31 </body>
     32 <script type="text/javascript"> 
     33 
     34 //window.index=1;
     35 var timer=500;
     36 var index=0;
     37 
     38 var t=setInterval(change,timer);
     39 
     40 function change(){
     41     $('#t1').click(function(){
     42         timer=2000;
     43         clearInterval(t);
     44         t=setInterval(change,timer);
     45     });
     46     $('#t2').click(function(){
     47         timer=5000;
     48         clearInterval(t);
     49         t=setInterval(change,timer);
     50     });
     51     $('#t3').click(function(){
     52         timer=500;
     53         clearInterval(t);
     54         //t=setInterval(change,timer);
     55     });
     56     document.getElementById('container').innerHTML=index ;
     57     index++;
     58 }
     59 
     60 </script>  
     61 <script>
     62     
     63     var count = 0, timer;
     64     $('#three').click(function(){
     65         console.log("click");
     66         if(count < 2){
     67             if(timer){
     68                 clearTimeout(timer);
     69             }
     70             count ++;
     71             timer = setTimeout(function(){
     72                 count = 0;
     73             }, 500);
     74         }
     75         else if(count === 2){
     76             count = 0;
     77             clearTimeout(timer);
     78             threeClick();
     79         }
     80     });
     81     function threeClick(){
     82         alert('three click');
     83     }
     84 </script>
     85  <script>
     86       var timeoutflag = null;
     87       $('#clickOne').click(function() {
     88         if(timeoutflag != null){
     89           clearTimeout(timeoutflag);
     90         }
     91  
     92           timeoutflag=setTimeout(function(){
     93             dosomething();
     94           },1000);
     95          
     96       });
     97   
     98      function dosomething(){
     99         alert(1);
    100     }
    101  </script>
    102 </html>
    View Code
  • 相关阅读:
    494 Target Sum 目标和
    493 Reverse Pairs 翻转对
    492 Construct the Rectangle 构建矩形
    491 Increasing Subsequences 递增子序列
    488 Zuma Game 祖玛游戏
    486 Predict the Winner 预测赢家
    485 Max Consecutive Ones 最大连续1的个数
    483 Smallest Good Base
    Django Form组件
    Django Auth组件
  • 原文地址:https://www.cnblogs.com/carsonwuu/p/9120994.html
Copyright © 2011-2022 走看看