setInterval执行时候被覆盖

Question

click: () => {
 _this = this
 _this.scheduleName = params.row.name
 axios({
 method: 'post',
 url: '/get_schedule/',
 data: Qs.stringify({'schedule_start':params.row.name})
      }).then(function (response){
_this.percentClock[_this.scheduleName] = setInterval('_this.test1(_this.scheduleName)', 3000) 
        })
   }

这段代码对应前端的start按钮

当我点击start的时候会传入任务的名称，然后会执行相应的test1函数，然后我为test1设置了循环执行。
问题：
当我之点击q1任务的start可以正常运行，但是当我两个start同时点击，只会执行后一个点击的setInterval()函数，第一个相当于被覆盖了，为什么会这样，有没有什么解决思路？

如图，其中我再test1函数console.log(taskId)，当第一次点击q1 start，输出如下

可以看到输出了4次Q1(当输出十次我会清除)，然后此时我再点击q2的start，输出如下

再也没有输出q1的值，因此我觉得是被覆盖了。
当我一个一个运行，即等待q1为100%则不会出现问题

全部代码

render: (h, params) => {
        return h('div', [
            h('i-button', {
                props: {
                    type: 'error',
                    size: 'small',
                },
                style: {
                    marginRight: '5px'
                },
                on: {
                    click: () => {
                         _this = this
                         _this.scheduleName = params.row.name
                         axios({
                             method: 'post',
                             url: '/delete_graph/',
                             data: Qs.stringify({'start_name':params.row.name})
                         })
                         axios({
                         method: 'post',
                         url: '/get_schedule/',
                         data: Qs.stringify({'schedule_start':params.row.name})
                         }).then(function (response){
                            _this.percentClock[_this.scheduleName] = setInterval('_this.test1(_this.scheduleName)', 3000) 
                            })
                    }
                }
            }, 'Start')
---------------------------------------
test1(taskId) {
    console.log(taskId)
    _this = this
    axios({
     method: 'post',
     url: '/get_schedule/',
     data: Qs.stringify({'schedule_start':this.scheduleName})
    }).then(function (response){
         //console.log(response.data)
         _this.$nextTick(() => {
            if (_this.progress['percentage' + taskId] === undefined) {
                 Vue.set(vm.progress, 'percentage' + taskId, "0")
                 Vue.set(vm.progress, 'loss' + taskId, "0")
                 Vue.set(vm.progress, 'status' + taskId, '未运行')
            }
            if (response.data[taskId].epoch_index === undefined) {
                _this.progress['percentage' + taskId] = 0
                _this.progress['loss' + taskId] = 0
            } 
            if (_this.watchPause === '已暂停') {
                console.log('sucee')
                _this.progress['percentage' + taskId] = response.data[taskId].epoch_index
                localStorage.setItem('percentage' + taskId,response.data[taskId].epoch_index)
            }
            else{
                _this.progress['percentage' + taskId] = response.data[taskId].epoch_index
                _this.progress['loss' + taskId] = response.data[taskId].epoch_loss
                //console.log(_this.progress)
                }
            })
         if (response.data[taskId].epoch_index === 10) {
            
            console.log('success')
            localStorage.setItem('percentage' + taskId,response.data[taskId].epoch_index)
            localStorage.setItem('loss' + taskId,response.data[taskId].epoch_loss)
            clearInterval(_this.percentClock[taskId])
         }
    })
},
            

Answer 1

楼主是调用的同一个函数吗？
看起来是变量作用域的问题。 --指正: 问题是引用了同一对象。
改成闭包看看？

--------补充

那就是你得前面的函数变量 被修改了，你改成闭包就行了。让他独自成为一个作用域

click: () => {
     _this = this
     // _this.scheduleName = params.row.name
     axios({
     method: 'post',
     url: '/get_schedule/',
     data: Qs.stringify({'schedule_start':params.row.name})
    }).then(function (response){
        (function(scheduleName){
          _this.percentClock[scheduleName] = setInterval('_this.test1(scheduleName)', 3000) 
        })(params.row.name)
    })
   }

----修改
如果你写 setInterval('_this.test1(scheduleName)', 3000)
参数 scheduleName 他会读取 this.scheduleName;

click: () => {
     _this = this
     var scheduleName = params.row.name;
     或者
     let scheduleName = params.row.name;
     axios({
     method: 'post',
     url: '/get_schedule/',
     data: Qs.stringify({'schedule_start':params.row.name})
    }).then(function (response){
          _this.percentClock[scheduleName] = setInterval(()=>{
              _this.test1(scheduleName)
          }, 3000) 
    })
   }

Answer 2

什么叫相当于覆盖?
'_this.test1(_this.scheduleName)' 加引号是弄啥?

Answer 3

应该没没有被覆盖，执行了的。你再仔细的断点看看... 即便_this.percentClock[_this.scheduleName]名称一样都不会存在覆盖的情况，一旦开始了就不会结束了。相同的也不会覆盖的，只有手动clearInterval才会结束