JavaScript는 차단을 구현합니다.

머리말

JavaScript는 웹 개발 및 프런트엔드 개발에 널리 사용되는 고급 스크립팅 언어입니다. 대부분의 경우 JavaScript는 이벤트가 트리거될 때 함수가 실행되는 이벤트 중심 프로그래밍 패턴을 따르는 비동기 언어입니다. 따라서 JavaScript는 DOM 조작 및 AJAX 요청과 같은 UI 사용자 작업과 관련된 작업을 처리하는 데 이상적입니다.

그러나 때로는 코드의 동기화 및 순차적 실행을 보장하기 위해 JavaScript 실행을 차단해야 할 때도 있습니다. 특히 함수 실행이 완료되기 전에 다른 함수가 기다려야 하는 경우와 같은 일부 복잡한 시나리오에서는 더욱 그렇습니다. 결과가 반환됩니다. 현재 JavaScript 차단을 구현하려면 몇 가지 기술을 사용해야 합니다.

이 문서에서는 주로 다음을 포함하여 JavaScript 차단을 구현하는 몇 가지 방법을 소개합니다.

1. setTimeout 사용
2. Promise 사용
3. async/await 사용
4. Generator 사용

setTimeout을 사용하여 JavaScript 차단 구현

필요할 때 JavaScript에서 차단을 구현할 때 setTimeout은 매우 일반적인 방법입니다. setTimeout은 일정 시간이 지난 후 지정된 작업을 수행하는 타이머를 생성할 수 있습니다. 타이머의 시간 매개변수를 0으로 설정하면 JavaScript 실행기가 현재 작업을 완료한 후 이 타이머의 함수를 실행하도록 할 수 있습니다. 이런 방식으로 JavaScript 차단을 시뮬레이션할 수 있습니다.

샘플 코드는 다음과 같습니다.

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function demo() {
  console.log('Start');
  await sleep(5000); // sleep for 5 seconds
  console.log('End');
}

demo();

이 샘플 코드에서는 setTimeout 메서드를 호출하고 Promise 개체를 반환하는 sleep이라는 함수를 정의합니다. 데모 함수에서 sleep 메소드를 호출하면 JavaScript 실행 프로그램은 후속 코드를 실행하기 전에 5초 동안 대기합니다.

Promise를 사용하여 JavaScript에서 차단 구현

Promise는 JavaScript에서 매우 중요한 비동기 프로그래밍 패턴입니다. Promise를 사용하면 비동기 작업을 동기 패턴으로 변환하여 코드 동기화 및 읽기 가독성을 더 쉽게 유지할 수 있습니다.

샘플 코드는 다음과 같습니다.

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

function demo() {
  console.log('Start');
  sleep(5000).then(() => {
    console.log('End');
  });
}

demo();

이 샘플 코드에서는 여전히 sleep 함수를 사용하여 차단 작업을 시뮬레이션하지만 이번에는 Promise 개체를 사용합니다. 데모 함수에서 sleep 메소드를 호출하면 Promise 객체가 반환됩니다. then 메소드를 호출하여 콜백 함수를 등록하고 Promise가 완료되면 이 콜백 함수를 실행할 수 있습니다. 이번에는 async 및 wait 키워드를 사용하는 대신 Promise 객체가 코드를 동기화되고 읽기 쉬운 상태로 유지합니다.

async/await를 사용하여 JavaScript에서 차단 작업 구현

ES6에서는 async/await 키워드를 도입하여 이러한 키워드를 통해 Promise 객체를 더 쉽게 처리하여 JavaScript에서 차단 작업을 구현할 수 있습니다.

샘플 코드는 다음과 같습니다.

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function demo() {
  console.log('Start');
  await sleep(5000);
  console.log('End');
}

demo();

이 샘플 코드에서는 async 및 wait 키워드를 사용하고 비동기 함수 본문 안에 sleep 함수를 넣습니다. 데모 함수 내에서 sleep 메소드를 호출하면 자동으로 Promise 객체가 완료될 때까지 기다립니다. 이 접근 방식을 사용하면 코드에서 차단과 비차단 간의 차이를 명확히 하고 코드를 간결하고 읽기 쉽게 유지할 수 있습니다.

Generator를 사용하여 JavaScript 차단 구현

Generator는 중단하고 다시 시작할 수 있는 특수 JavaScript 함수입니다. 생성기는 비동기 작업을 반복하고 다른 제어 흐름과 혼합하여 JavaScript에서 차단 작업을 구현할 수 있습니다.

샘플 코드는 다음과 같습니다.

function* demo() {
  console.log('Start');
  yield sleep(5000);
  console.log('End');
}

function sleep(ms) {
  setTimeout(() => {
    it.next();
  }, ms);
}

const it = demo();
it.next();

이 샘플 코드에서는 Generator 함수를 사용하고 그 안에 Sleep 함수를 넣었습니다. 데모 함수 내에서 Yield 키워드를 호출하면 현재 실행 상태를 일시 중지하고 sleep 함수 실행이 완료될 때까지 기다립니다. 슬립 기능이 완료되면 JavaScript 실행기는 데모 기능으로 돌아가서 후속 코드를 계속 실행합니다.

결론

JavaScript는 매우 강력하고 유연한 프로그래밍 언어이며 비동기 특성 덕분에 매우 좋은 스크립팅 언어이기도 합니다. 그러나 어떤 경우에는 보다 순차적이고 동기적인 작업을 달성하기 위해 일부 비동기 기능을 희생해야 합니다. 이 기사에서 소개된 여러 가지 방법을 통해 JavaScript의 실행 프로세스를 더 잘 제어하고 보다 강력하고 효율적인 코드를 작성할 수 있습니다.

위 내용은 JavaScript는 차단을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!