设置定时器详解setTimeout、setInterval 、clearTimeout

admin · 2022-1-17 14:44:08

1、设置延时调用setTimeout
<script>
      // 1. setTimeout
      // 语法规范：  window.setTimeout(调用函数, 延时时间);
      // 1. 这个window在调用的时候可以省略
      // 2. 这个延时时间单位是毫秒但是可以省略，如果省略默认的是0
      // 3. 这个调用函数可以直接写函数还可以写函数名还有一个写法 '函数名()'
      // 4. 页面中可能有很多的定时器，我们经常给定时器加标识符（名字)
      // setTimeout(function() {
      //    console.log('时间到了');
      // }, 2000);
举例：
   function callback() {
         console.log('爆炸了');
      }
      var timer1 = setTimeout(callback, 3000);
      var timer2 = setTimeout(callback, 5000);
      // setTimeout('callback()', 3000); // 我们不提倡这个写法
</script>

2、设置隔时间重复调用setInterval

<script>
      // 1. setInterval
      // 语法规范：  window.setInterval(调用函数, 延时时间);
举例：
      setInterval(function() {
         console.log('继续输出');
      }, 1000);
      // 2. setTimeout  延时时间到了，就去调用这个回调函数，只调用一次就结束了这个定时器
      // 3. setInterval  每隔这个延时时间，就去调用这个回调函数，会调用很多次，重复调用这个函数
</script>

3、清除定时器clearTimeout
举例1：
<script>

      var btn = document.querySelector('button');
      var timer = setTimeout(function() {
         console.log('爆炸了');
   }, 5000);
      btn.addEventListener('click', function() {
      clearTimeout(timer);
      })；
</script>
举例2：
<body>
  <button class="begin">开启定时器</button>
  <button class="stop">停止定时器</button>
<script>
      var begin = document.querySelector('.begin');
      var stop = document.querySelector('.stop');
      var timer = null; // 全局变量  null是一个空对象
      begin.addEventListener('click', function() {
         timer = setInterval(function() {
            console.log('ni hao ma');
         }, 1000);
   })；
      stop.addEventListener('click', function() {
         clearInterval(timer);
      }) ；
</script>
</body>

		自动登录	找回密码
密码			立即注册

设置定时器详解setTimeout、setInterval 、clearTimeout

0 个回复

快速回复

admin

楼主热帖

相关帖子

标签云

艾Q网