JS-BOM-定时器（附源码案例）

时间：2022-11-07 23:34:09

1. 设置定时器

  • setInterval()；循环定时器：固定时间间隔指定一次，像闹钟一样，不关闭继续执行。
  • setTimeout()；炸弹定时器：只执行一次，不能执行下一次了。

//调用方法：

//方法1：匿名函数。
      setInterval(function () {
          console.log("方法1");
      },1000)


//方法2：代码以字符串形式添加（一般没人用这种方法）
    setInterval("console.log('方法2');",1000)


//方法3：函数名
    setInterval(fn,1000)

function fn(){
        console.log("方法3");
    }

2. 清除定时器

  • clearInterval()：是清除SetInterval定义的定时器用的。
  • clearTimeout()：是清除setTimeout定义的定时器用的。

2.1定时器的返回值是定时器的编号，即定时器ID，数值类型。利用返回值可以清除定时器。


//利用返回值可以清除定时器。
var num = 0;
var timer = setInterval(function () {
        num++
        console.log(num);
if(num===10){
//清除定时器
            clearInterval(timer);
        }
    },1000);

2.2 定时器和js程序是异步执行的


     setInterval(function () {
         console.log("nihao");
     },1000);
for(var i =0;i<100;i++){
        console.log(i);
    }

//页面会先输出for循环1-99之后再输出nihao
//定时器会自己用一根线

定时器不存在覆盖，一旦后一个定时器用了前一个定时器的名字，前一个定时器就无法关闭或者停止。

          var num = 0;
for(var i=0;i<2;i++){
var timer = setInterval(function () {
                  num++;
                  console.log(num);
if(num == 3){
                      clearInterval(timer);
                  }
              },1000);
          }

JS-BOM-定时器（附源码案例）

定时器案例源码下载地址：https://github.com/luyu1314/04-BOM-case
标签：

相关文章