자바스크립트에서 비동기식을 구현하는 방법

비동기 JavaScript 구현 방법: 1. setTimeout 메서드를 사용합니다. 2. setImmediate 메서드를 사용합니다. 4. 새 이미지 로드 상태를 모니터링합니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, DELL G3 컴퓨터.

비동기 구현을 구현하는 Javascript 메서드:

1. setTimeout: 이것은 가장 간단한

setTimeout( function() {
    console.log(1);
});
console.log(2);

2입니다. IE10에서 추가된 새 함수로, 특히 UI 스레드를 해방하는 데 사용됩니다. IE10 이하 및 기타 브라우저는

setImmediate(function(){
    console.log(1);
});
console.log(2);

3을 지원하지 않습니다. requestAnimationFrame: 애니메이션에 특별히 사용되는 HTML5/CSS3 시대의 새로운 제품입니다. 하위 수준 브라우저는

var asynByAniFrame = (function(){
    var _window = window,
    frame = _window.requestAnimationFrame
            || _window.webkitRequestAnimationFrame
            || _window.mozRequestAnimationFrame
            || _window.oRequestAnimationFrame
            || _window.msRequestAnimationFrame;
    return function( callback ) { frame( callback ) };
})();
asynByAniFrame(function(){
    console.log(1);
})
console.log(2);

를 지원하지 않습니다. 4. 새로운 이미지 로딩 상태 모니터링: data:image 데이터 형식으로 이미지를 로드하고 로딩 상태를 청취함으로써 비동기 구현이 이루어집니다.

일부 브라우저는 data:image 이미지 데이터 형식을 지원하지 않지만 여전히 onerror 상태를 트리거하여 비동기 구현을 달성할 수 있습니다. 그러나 IE8 이하에서는 data:image 데이터 형식의 이미지에 대해 onerror가 동기적으로 실행됩니다.

function asynByImg( callback ) {
    var img = new Image();
    img.onload = img.onerror = img.onreadystatechange = function() {
        img = img.onload = img.onerror = img.onreadystatechange = null;
        callback(); 
    }
    img.src = "data:image/png,";
}
asynByImg(function(){
    console.log(1);
});
console.log(2);

5. 스크립트 로딩 상태 모니터링

　원칙은 새 이미지와 동일합니다. data:text/javascript 스크립트를 생성하고 로딩 상태를 모니터링하여 비동기 구현을 수행합니다.

　일부 브라우저는 데이터: 텍스트/자바스크립트 형식의 스크립트를 지원하지 않지만 여전히 onerror 및 onreadystatechange 이벤트를 트리거하여 비동기 구현을 달성할 수 있습니다.

var asynByScript = (function() {
    var _document = document,
        _body = _document.body,
        _src = "data:text/javascript,",
        //异步队列
        queue = [];
    return function( callback ) {
            var script = _document.createElement("script");
            script.src  = _src;
            //添加到队列
            queue[ queue.length ] = callback;
            script.onload = script.onerror = script.onreadystatechange = function () {
                script.onload = script.onerror = script.onreadystatechange = null;
                _body.removeChild( script );
                script = null;
                //执行并删除队列中的第一个
                queue.shift()();
            };
            _body.appendChild( script );
        }
    })();
asynByScript( function() {
    console.log(1);
} );
console.log(2);

관련 무료 학습 권장 사항: javascript(동영상)

위 내용은 자바스크립트에서 비동기식을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!