vue定时器实现打包进度条

需求：定时器循环执行更新进度条状态，到达终态时定时器停止
实现：setInterval和clear实现循环执行函数，和清除定时器功能
参考教程写法：使用 setInterval() 和 clearInterval()来创建动态进度条

image.png

踩坑：
（1）setInterval使用函数名作为调用句柄时不能带参数
（2）this.nav_item_child拿不到参数值
（3）console.log()打印数据实时变化，视图未更新
解决：
（1）setInterval调用函数传参——循环只执行一次
setInterval(frame(params),2000)，函数调用，函数调用就会有返回值，函数的返回值当成了setTimeout/setInterval函数的参数
解决方案：
使用匿名函数包装的方式

image.png

使用匿名函数传递参数如下：

jobStatus(jobNum, jobListIndex, key) {
      let obj = this;
      //同时存在多个非终态任务时，同时循环请求jobStatus,定时器存储数组
      this.timerList[jobListIndex] = setInterval(function() {
        obj.$http
          .get("/zmtc/majorpack/jobstatus", {
            params: {
              business: obj.nav_item_child,
              pack_type: obj.nav_item_parent,
              pack_method: "debug",
              job_num: jobNum
            }
          })
          .then(function(res) {
            if (res.data.errNo === 0) {
              var key = this.nav_item;
              var endStatus = ["1", "2", "3"];
              var data = res.data.data[jobNum];
              //任务状态为终态并且打包时间不为空，停止jobstatus请求
              if (
                endStatus.indexOf(data.status) !== -1 &&
                data.consume_time !== ""
              ) {
                //停止数组中其中一个定时器，并且从数组剔除
                clearInterval(obj.timerList[jobListIndex]);
                this.timerList.splice(jobListIndex, 1);
              }
              //在列表整体赋值前，jobstatus接口返回值添加属性name，从history接口取值，判断为了兼容每页任务的情况
              if (obj.jobList[key][jobListIndex].name !== undefined) {
                data.name = obj.jobList[key][jobListIndex].name;
              }
              obj.$set(obj.jobList[key], jobListIndex, data);
            }
          });
      }, 2000);
      this.loading = false;
    },