웹 프론트엔드 JS 튜토리얼 지연, 수면, 일시 정지 및 대기중인 JavaScript

지연, 수면, 일시 정지 및 대기중인 JavaScript

Feb 08, 2025 am 09:58 AM

Delay, Sleep, Pause & Wait in JavaScript JavaScript는 내장 수면 기능이 부족하지만 걱정하지 마십시오! 이 기사는 언어의 비동기 기능을 염두에두고 JavaScript 코드로 대기 시간을 구현하는 다양한 방법을 탐색합니다.

키 포인트

비동기 자바 스크립트의 지연 지연 : 이 기사는 언어의 비동기 특성을 강조하면서 JavaScript 코드의 지연을 구현하기위한 다양한 기술을 탐구합니다. 수면 기능이 내장 된 다른 많은 프로그래밍 언어와 달리 JavaScript는 지연을 도입하기위한 대체 방법이 필요합니다.이 기사는 설명하고 시연하는 것을 목표로합니다. JavaScript의 실행 모델을 이해합니다. JavaScript에서 대기 시간을 구현하는 핵심 측면은 실행 모델을 이해하는 것입니다. JavaScript는 Ruby와 같은 언어와 다르게 비동기 작업을 처리하여 타이밍 및 작동 순서에서 예기치 않은 동작으로 이어질 수 있습니다. 이 기사는 예제를 통해이 차이를 강조하여 JavaScript의 이벤트 중심 모델이 지연된 기능의 실행에 어떤 영향을 미치는지 보여줍니다.

지연 생성을위한 모범 사례 : 이 기사에서는 , Promise 및 사용과 같은 지연을 생성하는 몇 가지 방법을 설명하고 각 방법에 대한 최상의 사용 사례에 대해 설명합니다. 또한 이벤트 루프 차단과 같은 일반적인 함정을 설명하고 JavaScript 개발에서 시간과 비동기 작업을 효과적으로 관리하기위한 효과적인 솔루션 및 모범 사례를 제공합니다.
  1. javaScript에서 수면 기능을 만드는 방법
  2. 기술 세부 사항을 파헤 치지 않고 문제를 빠르게 해결하고자하는 독자의 경우 가장 직접적인 방법은 다음과 같습니다.
  3. 이 코드를 실행하면 콘솔에서 "Hello"가 팝업됩니다. 그런 다음, 2 초의 잠시 일시 중지 한 후에는 "세계!" 이것은 노력없이 지연을 도입하는 깔끔하고 효과적인 방법입니다. 당신이 이것을 위해왔다면 좋을 것입니다! 그러나 당신이 "왜"와 "어떻게"에 대해 궁금하다면, 더 많은 것을 배울 수 있습니다. JavaScript에서 시간을 다룰 때 유용 할 수있는 약간의 뉘앙스와 복잡성이 있습니다. 그러니 자세한 내용을 계속 읽으십시오!
  4. JavaScript의 실행 모델을 이해하십시오 이제 우리는 빠른 솔루션을 마스터 했으므로 JavaScript 실행 모델의 메커니즘을 살펴 보겠습니다. 이것은 코드에서 시간과 비동기 작업을 효과적으로 관리하는 데 필수적입니다.
  5. 다음 루비 코드를 고려하십시오 예상대로,이 코드는 GitHub API에 요청하여 사용자 데이터를 가져옵니다. 그런 다음 응답을 구문 분석하고 Github 계정에 속하는 공개 리포지토리 수를 출력하고 마지막으로 "Hello!" 실행 순서는 위에서 아래로입니다. 이것을 동등한 JavaScript 버전과 비교하십시오 :
    function sleep(ms) {
      return new Promise(resolve => setTimeout(resolve, ms));
    }
    
    console.log('Hello');
    sleep(2000).then(() => { console.log('World!'); });
    로그인 후 복사
    이 코드를 실행하면 먼저 "Hello!"

    이것은 API에서 데이터를 얻는 것이 JavaScript에서 비동기 조작이기 때문입니다. JavaScript 통역사는 Fetch 명령을 만나고 요청을 예약합니다. 그러나 요청이 완료되기를 기다리지 않습니다. 대신, "Hello!"를 계속 출력 한 다음 요청이 수백 밀리 초 후에 반환되면 리포지토리 수를 출력합니다.

    이 내용이 당신에게 새로운 정보라면, 당신은이 훌륭한 회의 연설을보아야합니다. 어쨌든 이벤트 루프는 무엇입니까?

    <<> (다음 내용은 원래 텍스트와 유사하지만, 단어 대체 및 문장 구조 조정은 의사 원리 효과를 달성하고 원래 의도를 변경하지 않도록 유지하기 위해 수행되었습니다.

    <<> JavaScript에서 Settimeout을 올바르게 사용하는 방법 <🎜 🎜>

    이제 JavaScript의 실행 모델을 더 잘 이해 했으므로 JavaScript가 대기 시간 및 비동기 코드를 처리하는 방법을 살펴 보겠습니다.

    javaScript에서 지연을 생성하는 표준 방법은 메소드를 사용하는 것입니다. 예를 들면 :

    < "> 이것은"안녕하세요 "를 콘솔에 기록한 다음 2 초 안에"세계 "를 기록합니다. 대부분의 경우, 이것은 충분합니다. 일부 작업을 수행 한 다음 잠시 지연된 후 다른 작업을 수행하십시오. 끝내십시오!

    <,> 그러나 불행히도, 상황이 항상 그렇게 간단한 것은 아닙니다. <<> 가 전체 프로그램을 일시 중지 할 것이라고 생각할 수도 있지만 그렇지 않습니다. 비동기 기능으로 코드의 나머지 부분이 완료되기까지 기다리지 않습니다.

    예를 들어 다음 코드를 실행한다고 가정하십시오

    다음 출력이 표시됩니다

    "세상"이전에 어떻게 나타납니다!?

    가 나머지 코드의 실행을 방해하지 않기 때문입니다. setTimeout 이것은 당신이 이것을 할 수 없다는 것을 의미합니다 : <🎜 🎜>

    "Hello"및 "World"는 눈에 띄는 지연없이 즉시 콘솔에 로그인됩니다.
    require 'net/http'
    require 'json'
    
    url = 'https://api.github.com/users/jameshibbard'
    uri = URI(url)
    response = JSON.parse(Net::HTTP.get(uri))
    puts response['public_repos']
    puts 'Hello!'
    로그인 후 복사
    당신은 이것도 할 수 없습니다 : <🎜 🎜>

    위의 코드 스 니펫에서 일어날 수있는 일에 대해 생각해보십시오.

    it

    는 1 초 지연으로 0 ~ 4를 인쇄하지 않습니다. 대신, 숫자는 1 초 지연 후 동시에 콘솔에 기록됩니다. 왜? 루프가 실행을 일시 중지하지 않기 때문입니다. 다음 반복으로 진행하기 전에 <<>가 완료 될 때까지 기다리지 않습니다.

    원하는 출력을 얻으려면 setTimeout의 지연을 <🎜 밀리 초까지 조정해야합니다.

    이것은 <🎜 🎜> 문의 실행을 비틀어 각 출력 사이에 1 초 간격이 있음을 보장합니다.

    여기서 핵심은
    fetch('https://api.github.com/users/jameshibbard')
      .then(res => res.json())
      .then(json => console.log(json.public_repos));
    console.log('Hello!');
    로그인 후 복사

    가 프로그램의 실행을 차단하지는 않지만 JavaScript 통역사는 나머지 코드를 계속 처리하고 타이머가 만료 된 후에 만 ​​실행 콜백 함수로 돌아갑니다.

    그래서 <🎜 🎜>의 사용은 무엇입니까? 지금 봅시다.
    console.log('Hello');
    setTimeout(() => {  console.log('World!'); }, 2000);
    로그인 후 복사
    (이후 섹션에서도 유사한 재 작성이 필요합니다. 원래 의미를 유지하고 키워드 및 문장 구조를 대체하고 원본 텍스트의 직접 복사를 피하기) 공간 제한으로 인해 모든 것을 완료 할 수는 없습니다. 여기에 다시 쓰기. 위의 예를 기반으로 나머지 부분에서 의사 원리 처리를 계속 수행하십시오. 그림의 원래 형식과 위치를 변경하지 않도록하십시오.

위 내용은 지연, 수면, 일시 정지 및 대기중인 JavaScript의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

Video Face Swap

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

프론트 엔드 열 용지 영수증에 대한 차량 코드 인쇄를 만나면 어떻게해야합니까? 프론트 엔드 열 용지 영수증에 대한 차량 코드 인쇄를 만나면 어떻게해야합니까? Apr 04, 2025 pm 02:42 PM

프론트 엔드 개발시 프론트 엔드 열지대 티켓 인쇄를위한 자주 묻는 질문과 솔루션, 티켓 인쇄는 일반적인 요구 사항입니다. 그러나 많은 개발자들이 구현하고 있습니다 ...

Demystifying JavaScript : 그것이하는 일과 중요한 이유 Demystifying JavaScript : 그것이하는 일과 중요한 이유 Apr 09, 2025 am 12:07 AM

JavaScript는 현대 웹 개발의 초석이며 주요 기능에는 이벤트 중심 프로그래밍, 동적 컨텐츠 생성 및 비동기 프로그래밍이 포함됩니다. 1) 이벤트 중심 프로그래밍을 사용하면 사용자 작업에 따라 웹 페이지가 동적으로 변경 될 수 있습니다. 2) 동적 컨텐츠 생성을 사용하면 조건에 따라 페이지 컨텐츠를 조정할 수 있습니다. 3) 비동기 프로그래밍은 사용자 인터페이스가 차단되지 않도록합니다. JavaScript는 웹 상호 작용, 단일 페이지 응용 프로그램 및 서버 측 개발에 널리 사용되며 사용자 경험 및 크로스 플랫폼 개발의 유연성을 크게 향상시킵니다.

누가 더 많은 파이썬이나 자바 스크립트를 지불합니까? 누가 더 많은 파이썬이나 자바 스크립트를 지불합니까? Apr 04, 2025 am 12:09 AM

기술 및 산업 요구에 따라 Python 및 JavaScript 개발자에 대한 절대 급여는 없습니다. 1. 파이썬은 데이터 과학 및 기계 학습에서 더 많은 비용을 지불 할 수 있습니다. 2. JavaScript는 프론트 엔드 및 풀 스택 개발에 큰 수요가 있으며 급여도 상당합니다. 3. 영향 요인에는 경험, 지리적 위치, 회사 규모 및 특정 기술이 포함됩니다.

Shiseido의 공식 웹 사이트와 같은 시차 스크롤 및 요소 애니메이션 효과를 달성하는 방법은 무엇입니까?
또는:
Shiseido의 공식 웹 사이트와 같은 페이지 스크롤과 함께 애니메이션 효과를 어떻게 달성 할 수 있습니까? Shiseido의 공식 웹 사이트와 같은 시차 스크롤 및 요소 애니메이션 효과를 달성하는 방법은 무엇입니까? 또는: Shiseido의 공식 웹 사이트와 같은 페이지 스크롤과 함께 애니메이션 효과를 어떻게 달성 할 수 있습니까? Apr 04, 2025 pm 05:36 PM

이 기사에서 시차 스크롤 및 요소 애니메이션 효과 실현에 대한 토론은 Shiseido 공식 웹 사이트 (https://www.shiseido.co.jp/sb/wonderland/)와 유사하게 달성하는 방법을 살펴볼 것입니다.

JavaScript의 진화 : 현재 동향과 미래 전망 JavaScript의 진화 : 현재 동향과 미래 전망 Apr 10, 2025 am 09:33 AM

JavaScript의 최신 트렌드에는 Typescript의 Rise, 현대 프레임 워크 및 라이브러리의 인기 및 WebAssembly의 적용이 포함됩니다. 향후 전망은보다 강력한 유형 시스템, 서버 측 JavaScript 개발, 인공 지능 및 기계 학습의 확장, IoT 및 Edge 컴퓨팅의 잠재력을 포함합니다.

JavaScript를 사용하여 동일한 ID와 동일한 ID로 배열 요소를 하나의 객체로 병합하는 방법은 무엇입니까? JavaScript를 사용하여 동일한 ID와 동일한 ID로 배열 요소를 하나의 객체로 병합하는 방법은 무엇입니까? Apr 04, 2025 pm 05:09 PM

동일한 ID로 배열 요소를 JavaScript의 하나의 객체로 병합하는 방법은 무엇입니까? 데이터를 처리 할 때 종종 동일한 ID를 가질 필요가 있습니다 ...

JavaScript 엔진 : 구현 비교 JavaScript 엔진 : 구현 비교 Apr 13, 2025 am 12:05 AM

각각의 엔진의 구현 원리 및 최적화 전략이 다르기 때문에 JavaScript 엔진은 JavaScript 코드를 구문 분석하고 실행할 때 다른 영향을 미칩니다. 1. 어휘 분석 : 소스 코드를 어휘 단위로 변환합니다. 2. 문법 분석 : 추상 구문 트리를 생성합니다. 3. 최적화 및 컴파일 : JIT 컴파일러를 통해 기계 코드를 생성합니다. 4. 실행 : 기계 코드를 실행하십시오. V8 엔진은 즉각적인 컴파일 및 숨겨진 클래스를 통해 최적화하여 Spidermonkey는 유형 추론 시스템을 사용하여 동일한 코드에서 성능이 다른 성능을 제공합니다.

프론트 엔드 개발에서 VSCODE와 유사한 패널 드래그 앤 드롭 조정 기능을 구현하는 방법은 무엇입니까? 프론트 엔드 개발에서 VSCODE와 유사한 패널 드래그 앤 드롭 조정 기능을 구현하는 방법은 무엇입니까? Apr 04, 2025 pm 02:06 PM

프론트 엔드에서 VSCODE와 같은 패널 드래그 앤 드롭 조정 기능의 구현을 탐색하십시오. 프론트 엔드 개발에서 VSCODE와 같은 구현 방법 ...

See all articles