首页  >  文章  >  web前端  >  javascript如何实现异步

javascript如何实现异步

coldplay.xixi
coldplay.xixi原创
2021-04-15 11:29:393857浏览

javascript实现异步的方法:1、使用setTimeout方法;2、使用setImmediate 方法;3、使用requestAnimationFrame方法;4、监听new Image加载状态;5、监听script加载状态方法。

javascript如何实现异步

本教程操作环境: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);

相关免费学习推荐:javascript(视频)

以上是javascript如何实现异步的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn