vue页面等待及应用场景

序号	函数	含义	示例
1	setTimeout	页面等待多少秒之后再运行
2	setInterval	页面多少秒运行一次

1 setTimeout

1.1 使用方式

页面等待多少秒之后再运行，只执行一次

// 这里以毫秒为单位
setTimeout(() => {
		// 业务逻辑
}, 500);

1.2 使用场景

当弹窗页面想一开始就绘制Echarts图表，直接使用mounted()绘图的方法会获取不到DOM对象。
我们可以使用watch()方法，监控visible弹框显示的状态符，当visible=True时，开始绘制。
但我发现，当他为True时，有的时候也是获取不到DOM对象（俺也不知道为啥，可能是页面还没有加载完）
所以，我再监控visible=True的同时增加了setTimeout()方法，让页面等待一秒钟就可以了

watch: {
    visible: function (val) {
      if (val) {
        setTimeout(() => {
          // 业务逻辑
        }, 1000)
      }
    }
  }

2 setInterval

2.1 使用方法

页面多少秒运行一次，只要页面不关闭就一直执行

// 这里以毫秒为单位
setInterval(() => {
	// 业务逻辑
}, 500);

2.2 使用场景一

当前端页面访问后台异步接口的时候使用
可以使用setInterval()方法每隔多少秒访问一次后台，建议时间不要设置的太小，以防服务器崩溃

// 这里的timer是一个标识，用于后面停止的时候使用
var timer = window.setInterval(function logname() {
  // 业务逻辑
 }, 5000);

当异步方法执行完之后，可以使用一下方法停止调用

clearInterval(timer);

2.3 使用场景二

当前端页面动态获取后台参数的时候也可以使用，比如：动态获取后台数据进行Echarts绘图，动态获取后台系统数据，展示GPU、内存占用率等。

本文档纯纯用于自学，借鉴于个网站教学平台和自己遇到的问题，如有不足，望指正