当寻求事件完成时，运行一个函数

Question

我有这两个功能。

async takeScreenShot() {
  this.pauseVideo();
  if (this.animations.length && !this.ended) {
    this.pauseLotties()
  }
  this.captures.push(this.canvas.toDataURL('image/webp'));
  if (!this.ended) {
    setTimeout(() => {
      this.takeScreenShot();
    }, 500);
  }
},

async pauseVideo() {
  console.log("currentTime", this.video.currentTime);
  console.log("duration", this.video.duration);
  this.video.pause();
  const oneFrame = 1 / 30;
  if (this.video.currentTime + oneFrame < this.video.duration) {
    this.video.currentTime += oneFrame;
  } else {
    this.video.play()
  }
}

现在我用的是 setTimeout 每隔500毫秒对我的画布进行一次截图，但我想使用seek事件进行截图，并承诺当它完成寻找时让我知道，这样我就可以进行截图。但我想使用seek事件进行截图，并承诺当它完成寻找时让我知道，这样我就可以进行截图。这样一来，它应该能更有效地抓取视频，而且可能更快。我将如何去做这件事？

Answer 1

takeScreenShot(){
return new Promise((resolve,reject)=>{
    this.video.addEventListener("seeked", ()=>{
        return resolve()
    });
})

}

并使用

    this.takeScreenShot().then(()=>{
          return this.pauseVideo()
     }).then(()=>{
console.log("Successfull completed")
})

如果有帮助，请告诉我

Answer 2

这就是我想出的解决方案。虽然它不完全是Sandeep Nagaraj的建议，但他的评论确实大大帮助我找到了解决方案。因此，我对他的帖子进行了加注。

async takeScreenShot(){
  let seekResolve;
  this.video.addEventListener("seeked", async () => {
          if (seekResolve) seekResolve();
        });
await new Promise(async (resolve,reject)=>{
  console.log("promise running", this.video);
  if(!this.ended){
  if(this.animations.length){
    this.pauseLotties()
  }  
   this.pauseVideo();
  await new Promise(r => (seekResolve = r));
  this.layer.draw();
  this.captures.push(this.canvas.toDataURL('image/webp'));
  resolve()
  this.takeScreenShot()
    }
})
},