JS 차단 방법을 사용하여 비동기 작업 대기열을 구현하는 방법에 대해 간략하게 설명합니다.-JS 튜토리얼-php.cn

JS 차단 방법을 사용하여 비동기 작업 대기열을 구현하는 방법에 대해 간략하게 설명합니다.

青灯夜游

풀어 주다： 2021-08-23 11:17:30

앞으로

2131명이 탐색했습니다.

JavaScript를 사용하여 비동기 작업 대기열을 구현하고 대기열의 모든 작업을 순서대로 처리하는 방법은 무엇입니까? 이 기사에서는 JavaScript 차단 방법을 사용하여 비동기 작업 대기열을 구현하는 방법을 소개합니다.

JS 차단 방법을 사용하여 비동기 작업 대기열을 구현하는 방법에 대해 간략하게 설명합니다.

Question

다음과 같이 비동기 작업 대기열을 구현하고 대기열의 모든 작업을 순서대로 처리해야 한다는 요구 사항이 있습니다.

무작위 시간에 대기열에 비동기 작업 추가
대기열의 작업은 선입선출 규칙에 따라 순차적으로 실행됩니다
작업은 비동기식 요청입니다. 다음 작업을 실행하기 전에 하나의 실행이 완료될 때까지 기다립니다.

이 요구 사항은 구현하기 쉽습니다. Java 언어에서는 BlockingQueue를 사용하지만 JavaScript에는 잠금 메커니즘이 없습니다. 구현하기가 쉽지 않습니다.

옵션 1

일정 간격으로 대기열에 작업이 있는지 확인하고, 있으면 첫 번째 작업을 꺼내 처리하는 동기식 비차단 방식을 사용한다고 생각하기 쉽습니다. 여기서 감지 간격은 500밀리초이며 setTimeout은 비동기 요청을 시뮬레이션하는 데 사용됩니다.

<body>
  <button onclick="clickMe()">点我</button>
</body>

로그인 후 복사

let queue = []
let index = 0
function clickMe() {
  queue.push({name: &#39;click&#39;, index: index++})
}

run()
async function run() {
  while (true) {
    if (queue.length > 0) {
      let obj = queue.shift()
      let res = await request(obj.index)
      console.log(&#39;已处理事件&#39; + res)
    } else {
      await wait(500)
      console.log(&#39;----- 队列空闲中 -----&#39;)
    }
  }
}
// 通过setTimeout模拟异步请求
function request(index) {
  return new Promise(function (resolve, reject) {
    setTimeout(() => {
      resolve(index)
    }, 1000)
  })
}
function wait(time) {
  return new Promise(function (resolve) {
    setTimeout(() => {
      resolve()
    }, time)
  })
}

로그인 후 복사

JS 차단 방법을 사용하여 비동기 작업 대기열을 구현하는 방법에 대해 간략하게 설명합니다.

하지만 이 솔루션에는 두 가지 문제가 있습니다.

유휴 대기열이 여전히 루프에서 처리되어 리소스를 소모하고 있습니다.
감지 간격을 파악하기 어렵습니다. 간격이 너무 길면 대기열 작업을 처리할 수 없으며 감지 간격이 너무 짧아서 소모됩니다. resources

Java의 BlockingQueue와 같나요? 대기열이 유휴 상태이고 리소스를 소비하지 않을 때 차단하는 방법은 무엇인가요?

옵션 2

주요 아이디어:

큐에 비동기 요청 추가 다음 작업 실행
큐에 있는 모든 작업이 처리된 후 실행 상태는 false로 표시됩니다

<body>
<button onclick="clickMe()">点我</button>
</body>

로그인 후 복사

// 异步请求队列
const queue = []
// 用来模拟不同的返回值
let index = 0
// 标志是否正在处理队列中的请求
let running = false

// 使用setTimeout模拟异步请求
function request(index) {
  return new Promise(function (resolve) {
    setTimeout(() => {
      resolve(index)
    }, 1000)
  })
}

// 连续点击，触发异步请求，加入任务队列
function clickMe() {
  addQueue(() => request(index++))
}

// 当队列中任务数大于0时，开始处理队列中的任务
function addQueue(item) {
  queue.push(item)
  if (queue.length > 0 && !running) {
    running = true
    process()
  }
}

function process() {
  const item = queue.shift()
  if (item) {
    item().then(res => {
      console.log(&#39;已处理事件&#39; + res)
      process()
    })
  } else {
    running = false
  }
}

로그인 후 복사

JS 차단 방법을 사용하여 비동기 작업 대기열을 구현하는 방법에 대해 간략하게 설명합니다.