关于js 中 异步调用的猜想

来源:互联网 发布:h5页面如何优化 编辑:程序博客网 时间:2024/04/28 17:05

js 进行网络异步调用大家都知道,核心是XMLHTTPRequest 对象.通过此对象可以跟服务器交互.但是异步在js 里面是如何实现的呢?

异步调用:当一个异步过程调用发出后,调用者不能立刻得到结果。实际处理这个调用的部件在完成后,通过状态、通知和回调来通知调用者。

同步调用:就是在发出一个功能调用时,在没有得到结果之前,该调用就不返回.

举个栗子:

同步调用:下班回家,要先用钥匙开门,然后才能进入房间;饭做好了,才能吃饭………;
异步调用:按下电饭煲的开始煮饭按钮,然后去看电视,同时等电饭煲哒的一声,就知道饭已经做好了.

默认情况下,js的代码执行都是顺序同步执行的.而且js是单线程的,这意味着你不能通过开一个新的线程来执行一个任务,然后又执行其它的任务.

不过js 可以用线程队列的方式来模拟多线程.比如我要执行一个费时的工作,但这个费时的工作,并不影响我做其它的事情,这个时候完全没有必要一直等它执行完成了,再去
做其它事情.

而是,把这个事情放到线程的队列里面,然后我再接着做别的事情.(注意这两个事情是没有任何关联的)

那么如何把费时的事情放到线程队列中,等待被处理呢?
下面是我个人的猜想:

<!doctype html><html>    <head>        <title>async</title>        <style>            #message{                color:red;                width:500px;                height:200px;                border:2px green solid;            }        </style>    </head>    <body>            <div id = 'message'>init</div>    </body>    <script>        function hardOperate(count,callback){            setTimeout(function(){                var i = 0;                  while(i < count)                {                    console.log('do :' + i )                    i ++;                }                callback(i);            })            document.getElementById('message').innerText = 'Loading........'        }        function finished(value){            document.getElementById('message').innerText = value+'';        }        hardOperate(100000,finished);    </script></html>

在100000次循环中,浏览器页面并没有发生卡白.除了最开始加载页面代码的时候有一点短暂的卡,这个跟js代码执行没有关系.

参照:https://github.com/oadaM92/oadaM92-blog/tree/master/blogs/2016-03-21-setTimout(0)

发现自己的看法太片面,其实还有事件驱动模式,发布订阅模式和promise

0 0
原创粉丝点击