video中实现截图(接口轮询调用,5s中执行一次) 使用setTimeout()

vue中实现方式
data () {
   return {
     state: false
   },
mounted () {
 //监听视频加载完成时获取第一帧loadeddata
    video.addEventListener('loadeddata', () => {
      var videoElement = document.getElementById('video')
      var canvas = document.createElement("canvas")                 
      canvas.width = videoElement.videoWidth
      canvas.height = videoElement.videoHeight
      this.canvas = canvas
      this.videoElement = videoElement
      this.drawImage(canvas, videoElement)
    }, false)
},
methods: {
    drawImage (canvas, videoElement) {
      canvas.getContext('2d').drawImage(videoElement, 0, 0, canvas.width, canvas.height)
      var img = document.createElement("img")
      img.src = canvas.toDataURL("image/png")
      // 图片base64格式转为file文件类型
      let result = this.dataURLtoFile(img.src, 'image/jpeg')
      this.getPredict(this.camera, result)
    },
    //将base64转换为blob
    dataURLtoFile (dataurl, type) {
      let binary = atob(dataurl.split(',')[1])
      let array = [];
      for(let i = 0; i < binary.length; i++) {
        array.push(binary.charCodeAt(i))
      }
      return new Blob([new Uint8Array(array)], {type:type })
    },
    // 截图上传后端
    getPredict (val, file) {
      // 把bolb格式转为formData格式进行提交
      let formData = new FormData()
      let fileOfBlob = new File([file], new Date()+'.jpg')
      formData.append('camera', val)
      formData.append('file', fileOfBlob)
      this.axios.post('/model/api/v1/predict2', formData, {
        headers: {
          Authorization: this.token
        }
      }).then(res => {
        console.log('res predict', res)
        if (res.status === 200) {
          if (res.data.status === 1 && res.data.message === 'OK') {
            console.log('res.data', res.data)
            if (this.state === true) {
              console.log('pause')
            } else {
             //接口响应成功，状态为200时   5s后再调用函数drawImage(截图、预测)
              this.timer = setTimeout(() => {
                this.drawImage(this.canvas, this.videoElement)
              }, 5000)
            }
          }
        }
      })
    }    
},
// 切换页面时，清除定时器
beforeDestroy(){
  this.state = true // 切换页面时，若接口状态为pending   判断状态，计时器不再循环
  window.clearTimeout(this.timer)
}