자바스크립트에서 비동기성을 구현하는 방법은 무엇입니까?

메서드: 1. setTimeout을 사용합니다. 3. requestAnimationFrame을 사용합니다. 4. "새 이미지" 로딩 상태를 모니터링하여 인식합니다. 6. 메시지 등을 사용합니다.

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

네이티브 자바스크립트에서 비동기를 구현하는 방법:

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);

6. html5의 새로운 기술로, window.onmessage 이벤트를 수신한 후 postMessage가 메시지를 보내 비동기

var asynByMessage = (function() {
        //异步队列
        var queue = [];
        window.addEventListener('message', function (e) {
            //只响应asynByMessage的召唤
            if ( e.data === 'asynByMessage' ) {
                e.stopPropagation();
                if ( queue.length ) {
                    //执行并删除队列中的第一个
                    queue.shift()();
                }
            }
        }, true);
        return function( callback ) {
            //添加到队列
            queue[ queue.length ] = callback;
            window.postMessage('asynByMessage', '*');
        };
    })();

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

7을 달성합니다. : 비동기식 속성을 갖춘 ES6의 새로운 기술

var asynByPromise = (function() {
        var promise = Promise.resolve({
                then : function( callback ) {
                    callback();
                }
            });
        return function( callback ) {
                    promise.then(function(){
                        callback();
                    })
                };
    })();
asynByPromise(function() {
    console.log(1);
});
console.log(2);

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 비디오를 방문하세요! !

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