• 技术文章 >web前端 >js教程

    javascript实现异步的方法有哪些

    青灯夜游青灯夜游2021-06-07 17:04:48原创128

    方法:1、利用setTimeout;2、利用setImmediate;3、利用requestAnimationFrame;4、通过监听“new Image”加载状态来实现;5、通过监听script加载状态来实现;6、利用Message等等。

    本教程操作环境:windows7系统、javascript1.8.5版、Dell G3电脑。

    原生javascript实现异步的方式:

    1、setTimeout:这个是最简单的

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

    2、setImmediate :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、监听new Image加载状态:通过加载一个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、监听script加载状态

      原理同new Image是一样的,生成一个data:text/javascript的script,并监听其加载状态实现异步。

      尽管部分浏览器不支持data:text/javascript格式数据的script,但仍然可以触发其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、Message:html5新技能,通过监听window.onmessage事件实现,然后postMessage发送消息,触发onmessage事件实现异步

    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、Promise: 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);

    更多编程相关知识,请访问:编程视频!!

    以上就是javascript实现异步的方法有哪些的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:javascript 异步
    上一篇:javascript设置编码的方法有哪些 下一篇:javascript数组排序方法是什么
    第16期线上培训班

    相关文章推荐

    • 浅谈JavaScript中的事件委托• JavaScript中如何更好地使用数组• 深入解析JavaScript中的作用域• 手把手带你弄懂JavaScript中的异步编程• 一文了解JavaScript中合并和克隆对象的方法

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网