运行搜索事件完成时的函数

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 毫秒为我的 canvas 截图一次。但我想使用 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 的建议，但他的评论确实帮助我找到了解决方案。因此，我对他的 post 投了赞成票。

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()
    }
})
},

运行搜索事件完成时的函数

Run a function when seek event completes

javascript

seek

promise

dom-events

vue.js

运行 搜索事件完成时的函数

Run a function when seek event completes

javascript

seek

promise

dom-events

vue.js

运行搜索事件完成时的函数