VB.net 2010 视频教程 VB.net 2010 视频教程 VB.net 2010 视频教程
SQL Server 2008 视频教程 c#入门经典教程 Visual Basic从门到精通视频教程
当前位置:
首页 > 网站开发 > JavaScript >
  • JavaScript教程之浅谈JS异步轮询和单线程机制

  • 2019-04-28 21:43 来源:未知

正文

回到顶部

单线程特点执行异步操作 

  js是单线程语言,浏览器只分配给js一个主线程,用来执行任务(函数),但一次只能执行一个任务,这些任务就会排队形成一个任务队列排队等候执行.一般而已,相对耗时的操作是要通过异步来进行加载,可以避免导致页面的假死.
1
2
3
setTimeout(function(){
     console.log(这是timeout事件回调);
},1000);
  JS阻塞renderdom的渲染,同一时间只能做一件事,避免了浏览器渲染DOM冲突,JS执行的时候,JS可以修改DOM,浏览器DOM渲染会停止,WebWorker支持多线程,但不能渲染DOM.
回到顶部

解决方案——异步

1
2
3
setTimeout(function(){
     console.log(这是timeout事件回调);
},1000);
  执行这段代码的时候,浏览器异步执行计时操作,传入setTimeout的函数会被暂存起来,当1000ms到了后,会触发定时事件,这个时候,就会把回调函数放到任务队列里,待所有程序执行完,处于空闲的状态时,会立马看看有没有暂存起来要执行的任务,整个程序就是通过这样的一个个事件驱动起来的,如下图1.1所示:
图1.1 工作原理图
  "任务队列"中的事件,除了IO设备的事件以外,还包括一些用户产生的事件(比如鼠标点击、页面滚动等等),例如onClick事件,只要指定这些事件的异步操作,就会进入任务队列中等待执行.
  其中JS实现异步是不断通过事件轮询(Event Loop)的方式实现的,同步代码直接执行,异步代码先放在异步队列中,等待同步代码执行完,轮询执行异步队列中的异步代码
  AJAX请求天气接口数据如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<script type="application/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="application/javascript">
    function urlencode (str) {
        str = (str + '').toString();
        return encodeURIComponent(str).replace(/!/g, '%21').replace(/'/g, '%27').replace(/\(/g, '%28').
        replace(/\)/g, '%29').replace(/\*/g, '%2A').replace(/%20/g, '+');
    }
   var city= '深圳',$citycode=urlencode(city);
   var url='http://v.juhe.cn/weather/index?format=2&cityname='+$citycode+'&key=c82727e986a4f6cfc6ba1984f1f9183a';
    $.ajax({url: url,
        dataType: "jsonp",
        type:"get",
        data:{location:city},
        success:function(data) {
            var sk = data.result.sk;
            var today = data.result.today;
            var futur = data.result.future;
            var fut = "日期温度天气风向";
            $('#mufeng').html(
                "<p>" + '当前: ' + sk.temp + '℃ , ' + sk.wind_direction + sk.wind_strength +
                ' ' + '空气湿度' + sk.humidity + ' , 更新时间' + sk.time +
                "</p><p style='padding-bottom: 10px;'>" + today.city + ' 今天是: ' + today.date_y +
                ' ' + today.week + ' ' + today.temperature + ' ' + today.weather + ' , ' + today.wind + "<p></p>"
            );
        }});
 
</script>