首页 > 代码库 > 关于定时器的那些事!

关于定时器的那些事!

定时器有两种方法,分别是setInterval和setTimeout

一、创建定时器:setInterval() - 每隔指定的毫秒数不停地执行指定的代码。

语法:setInterval(code,time);

参数说明:

    code为每隔指定的毫秒数要执行的函数或js代码

    time是指定的毫秒数

实例:动态时钟

   <div id="clock"></div>

   setInterval(function(){

     var today = new Date();

     t = today.toLocaleTimeString();

      document.getElementById("clock").innerHTML = t;

   },1000);

二、清除定时器: clearInterval() -停止 setInterval() 方法执行的函数代码

  要使用 clearInterval() 方法, 在创建计时方法时必须使用全局变量:

  myClock = setInterval(fn,time);

  clearInterval(myClock);

三、创建超时器 setTimeout() - 指定的毫秒数后执行指定的代码

语法:setTimeout(code,time)

参数说明:code:指定毫秒数后要执行的函数或js代码

     time:指定毫秒数

注:如果setTimeout也可实现setInterval的效果(不常用)

  <script type="text/javascript">
    var t=0;
    function timer(){
      document.getElementById("txt").value=http://www.mamicode.com/t;
      t++;
      setTimeout("timer()",1000);
    }
  </script>
  <body>
    <p>setTimeout实现计时器效果</p>
    <input type="text"id="txt">
  <script>
    timer();
  </script>
  </body>

实例:3秒后页面跳转到百度首页

    setTimeout(function(){

      location.href = "https://www.baidu.com";

    },3000);

四、清除超时器 clearTimeout() - 停止 setTimeout() 方法执行的函数代码

  要使用 clearTimeout() 方法, 在创建超时方法时必须使用全局变量:

  myTime = setTimeout(fn,time);

  clearTimeout(myTime);

五、setInterval()和setTimeout的区别

前者会不停的循环执行,而后者只会执行一次

关于定时器的那些事!