zoukankan      html  css  js  c++  java
  • js计时器方法的使用

    js中计时器重要使用window.setInterval()方法和window.setTimeout()方法,

    其中setInterval()方法的作用是每隔一段时间执行一次方法,而window.setTimeout()在一段时间内调用函数。

    setTimeout()方法一般通过调用自身迭代的方式实现计时器。与这两个方法对应的,还有清除这两个函数效果的

    两个方法,分别是window.clearInterval()和window.clearTimeout()。

    1.setInterval()和clearInterval()  (window可以省略)

    (1)setInterval()方法常用的语法如下:

    setInterval(function,interval);

    其中function是将要在间隔时间内执行的函数,interval是间隔的时间,单位是毫秒。

    (2)clearInterval()方法的常用语法如下:

    timer = setInterval(function,interval);

    clearInterval(timer);

    例子:

     1 <html>
     2     <head></head>
     3     <body>
     4         <p id="timer">点击开始计时!</p>
     5         <div>
     6             <button id="cutTimer" onclick="start()">开始</button>
     7             <button id="cutTimer" onclick="stop()">停止</button>
     8         </div>
     9         <script>
    10             var cutT = document.getElementById("cutTimer");
    11         
    12             var timer1 = null;
    13         
    14             function start(){
    15                 var countTime = function(){
    16                     date = new Date();
    17                     dateStr = date.toLocaleTimeString();
    18                     document.getElementById("timer").innerHTML = dateStr;
    19                 }
    20             
    21                 timer1 = window.setInterval(countTime,1000);
    22                         
    23             }
    24 
    25             
    26             function stop(){    
    27                 console.log("timer stop:"+timer1);
    28                 window.clearInterval(timer1);                    
    29             };
    30 
    31         </script>
    32     </body>
    33 </html>

    在这个例子中,点击开始后(会有一段延迟),页面上每隔1000毫秒(也就是1秒)执行一次,也就是显示当前的时分秒。

    2.setTimeout()和clearTimeout()

    这两个方法与setInterval()和clearInterval()方法用法类似,示例如下:

     1 <html>
     2     <head></head>
     3     <body>
     4         <p id="timer"></p>
     5         <div>
     6             <button id="cutTimer" onclick="timeOutAlert();">执行</button>
     7             <button id="cutTimer" onclick="stopTimeOutAlert();">停止</button>
     8         </div>
     9         <script>
    10             timeOut = null;
    11             function timeOutAlert(){
    12                 timeOut = window.setTimeout(function(){
    13                     console.log("time out..."+timeOut);
    14                     timeOutAlert();
    15                 },1000);
    16             }
    17             
    18             function stopTimeOutAlert(){
    19                 console.log("timeCut:"+timeOut);
    20                 window.clearTimeout(timeOut);
    21             }
    22         </script>
    23     </body>
    24 </html>

    可以看到timeOutAlert()方法每隔1000毫秒调用自身,在控制台打印出当前timeOut的值,timeOut第一次使用

    setTimeout()后为1,每次增加1,clearTimeout()通过这个数字作为入参清除当前的setTimeout()。

  • 相关阅读:
    Docker基本概念
    Docker 基本指令整理(一)
    其他软件技巧收藏
    Java ThreadPool的正确打开方式花钱的年华 | 江南白衣(5星推荐)
    java主线程等待所有子线程执行完毕在执行(常见面试题)
    (个人)Zookeeper集群环境部署
    linux下git怎么保存账号密码
    PHP跳出循环的方法及continue、break、exit的区别
    Linux 安装composer
    MySQL 删除数据库中重复数据方法
  • 原文地址:https://www.cnblogs.com/xhj123/p/6859078.html
Copyright © 2011-2022 走看看