Queue으로 작업실행

🏒 Task 를 Queue를 이용하여 작업 처리 하기

회사에서 작업을 하던 도중 해당시간이 되면 Queue에 담긴 순서대로 작업을 처리해야 하는 경우가 발생하였다.

로직은 아래와 같다

1. A음원 실행
2. 특정시간이 되면 B 음원 시작
3. B음원이 끝나면 C음원 시작
4. C음원 끝나면 D음원 시작
5. D음원 끝나면 다시 A음원 시작

단 2~4는 A음원이 음소거가 되어야 한다

 

 

 

 

🤿 TaskQueue 클래스 작성

class TaskQueue {
  constructor() {
    this.queue = [];
    this.isRunning = false;
  }

  add(task) {
    this.queue.push(task);
    this.runNext();
  }
  isLast() {
    return this.queue.length === 0;
  }

  async runNext() {
    if (this.isRunning || this.queue.length === 0) return;

    this.isRunning = true;

    const task = this.queue.shift();

    if (task) {
      try {
        await task();
      } catch (error) {
        console.error('작업 실행 중 에러:', error);
      }
    }

    this.isRunning = false;
    this.runNext();
  }
}

export const taskQueue = new TaskQueue();

 

add 함수 : Queue에 작업을 넣는 함수이며, 작업을 넣는 순간 runNext 함수를 실행한다

runNext 함수 : 현재 맨 앞에 있는 task를 추출하여, task를 실행하고 다음 실행할 task가 있으면 실행하고 아니면 종료한다

 

⚽️ TaskQueue를 이용하여 작업 담기

taskQueue에 작업은 다음과 같다

• FadeOut
• B음원 시작(B음원이 끝나면 C,D음원이 시작된다)

TaskQueue의 add함수에 담기

첫번째로 TaskQueue에 fadeOut, playVideo 함수를 순차적으로 실행시킨다

import { taskQueue } from './utils/taskQueue';
// 가짜 API
 dummyVideoList().then(res => {
    if (Array.isArray(res)) {
      res.forEach((item, index) => {
        const { id, url } = item;
        /* Task Add를 통하여 함수 담기 */
        taskQueue.add(async () => {
          await fadeOut(this.$refs.streamingvideo, 5000);
          await this.playVideo(url);
        });
      });
    }
  });

 

TaskQueue의 add 함수에 담기면, runNext 실행

add함수에 담기면, runNext에서 queue의 맨앞의 작업을 추출하여 실행한다

 

add(task) {
  this.queue.push(task);
  this.runNext();
}

/* TaskQueue 클래스의 runNext 함수 */
async runNext() {
    if (this.isRunning || this.queue.length === 0) return;

    this.isRunning = true;
	/* 
    queue의 맨앞 작업을 추출한다. 
    추출하는 함수는 아래와 같다
    async () => {
          await fadeOut(this.$refs.streamingvideo, 5000);
          await this.playVideo(url);
        } 
    */
    const task = this.queue.shift();

    if (task) {
      try {
        await task();
      } catch (error) {
        console.error('작업 실행 중 에러:', error);
      }
    }

    this.isRunning = false;
    this.runNext();
  }

 

 

playVideo를 실행시킨후 다음 Task를 어떻게 트리거시킬것인가

여기서 playVideo에 함수에 대한 설명을 적지 않았는데, playVideo같은 경우 video 태그에 url을 세팅하고 video play함수를 실행한다.

여기서 playVideo가 Promise로 관리되어 있다. Promise에서는 resolve함수를 호출하여 Promise가 종료가 된다

그리하여 resolve를 외부 변수인 this.currentResolve에 담는다

playVideo(src) {
  return new Promise(resolve => {
    const video = this.$refs.videoPlayer;
    // resolve 함수 담기
    this.currentResolve = resolve;

    video.src = src;
    video.load();
    video.play();
  });
},

 

그리고 비디오 endEvent에서 외부변수인 currentResolve를 호출한다

onVideoEnded() {
  if (this.currentResolve) {
    this.currentResolve(); // 현재 비디오 끝나면 큐 다음 작업 실행
    this.currentResolve = null;
    if (taskQueue.isLast()) {
      fadeIn(this.$refs.streamingvideo, 5000, 1);
    }
  }
},

 

비디오 endEvent에서 외부변수인 currentResolve를 실행시키면

1. fadeOut 함수 실행

2. playVideo 함수 실행, 여기서 resolve를 외부 변수인 currentResolve에 담기

3. video EndEvent에서 currentResolve 함수 실행

4. task함수가 종료되며, 다음 줄 실행(다음 task가 있으면 1~3반복)

add(task) {
  this.queue.push(task);
  this.runNext();
}

/* TaskQueue 클래스의 runNext 함수 */
async runNext() {
    if (this.isRunning || this.queue.length === 0) return;

    this.isRunning = true;
	
    const task = this.queue.shift();

    if (task) {
      try {
        /* 
            1. fadeOut 실행
            2. playVideo 실행
            3. video endevent에서 playVideo의 resolve함수 실행
            async () => {
                  await fadeOut(this.$refs.streamingvideo, 5000);
                  await this.playVideo(url);
                } 
            */
        await task();
      } catch (error) {
        console.error('작업 실행 중 에러:', error);
      }
    }
    // 4. 다음 줄 실행
    this.isRunning = false;
    this.runNext();
  }

 

 

후기

위와같이 Task를 Queue로 작업하였는데, 다만 외부변수를 관리해야하는 약간의 문제가 있지만,

Queue를 이용하니 동시다발적 Task가 작업이 발생할때, 관리가 용이했다