前端定时器 setInterval 和 setTimeout

1.setInterval 循环执行

循环执行就是设置一个时间间隔，每过一段时间都会执行一次这个方法,直到这个定时器被销毁掉。

用法是setInterval（“方法名或方法”，“延时”）， 第一个参数为方法名或者方法，注意为方法名的时候不要加括号，第二个参数为时间间隔（毫秒）。

设置循环执行

this.timer = setInterval(this.updataDevice, 5000)
// 第一个参数：this.updataDevice 是ts中的方法，只写方法名不写括号。
// 第二个参数：5000 表示延时，毫秒，5000毫秒=5秒，即执行完本次后，隔5秒再次执行

销毁定时器

用vue举例：

beforeDestroy() {  // 组件销毁前执行
  clearInterval(this.timer)  // 清除定时器
  this.timer = null  // 定时器的变量赋值null
},

顺便例一下vue的生命周期函数：

		beforeCreate: function () {
            console.group('beforeCreate 创建前状态===============》》');
        },
        created: function () {
            console.group('created 创建完毕状态===============》》');
        },
        beforeMount: function () {
            console.group('beforeMount 挂载前状态===============》》');//已被初始化
        },
        mounted: function () {
            console.group('mounted 挂载结束状态===============》》');
        },
        beforeUpdate: function () {
            alert("更新前状态");
            console.group('beforeUpdate 更新前状态===============》》'); //这里指的是页面渲染新数据之前
            alert("更新前状态2");
        },
        updated: function () {
            console.group('updated 更新完成状态===============》》');
        },
        beforeDestroy: function () {
            console.group('beforeDestroy 销毁前状态===============》》');
        },
        destroyed: function () {
            console.group('destroyed 销毁完成状态===============》》');
        }

2.setTimeout 定时执行

定时执行setTimeout是设置一个时间，等待时间到达的时候只执行一次，但是执行完以后定时器还在，只是没有运行。

用法是 setTimeout(“方法名或方法”, “延时”); 第一个参数为方法名或者方法，注意为方法名的时候不要加括号，第二个参数为时间间隔。

设置定时执行

setTimeout(() => {
      this.showMarker()  // 执行的方法
    }, 1000)  // 时间 1000毫秒 = 1秒

3. setTimeout超时调用和setInterval 间歇调用的区别：

setTimeout超时调用和setInterval 间歇调用，二者接受的参数相同，区别只在于:

setTimeOut(function(){},1000); 在特定时间之后调用函数，只调用一次；

setInterval(function(){},1000)；每隔特定的时间调用一次函数，调用n多次,最好不要经常使用；