网站地图|客服中心|设为首页|加入收藏

            行业新闻

            首页 > 新闻 > 网站制作 > 企业网站制作的js异步问题

            企业网站制作的js异步问题


            企业网站制作js单线程为什么会有'异步'问题

            看完前面的铺垫你是否会产生这些疑问£¬JS是单线程的£¬那么他是如?#38382;?#23454;现异步操作的£¿AJAX异步发送和回调请求£¬还有setTimeout也看起来像是多线程的£¿不急慢慢来

            企业网站制作的js异步问题

                js是同步的£¿

            是的£¬单线程£¬?#24378;?#23450;只能同步(排队)执行咯

                js为什么需要异步?

            如果JS中不存在异步,只能自上而下执行,万一上一行解析时间很长,那么下面的代码就会被阻塞¡£
            对于用户而言,阻塞就意味着"卡死",这样就导致了很差的用户体验

                js单线程又是如?#38382;?#29616;异步的呢?

            通过  事件循环(event loop)  实现'异步'

            经典问题£º

                 console.log('1')
                setTimeout(function(){
                 console.log('2')
                },0)
                console.log('3')  
                //       1£¬3£¬2

            也就是说,setTimeout里的函数并没有立即执行,而是延迟了?#27426;问?#38388;,满足?#27426;?#26465;件后,才去执行的,这类代码,我们叫异步代码¡£

            所以,这里我们首先知道了JS里的一种分类方式,就是将任务分为: 同步任务和异步任务

            也就是说,setTimeout里的函数并没有立即执行,而是延迟了?#27426;问?#38388;,满足?#27426;?#26465;件后,才去执行的,这类代码,我们叫异步代码¡£

            所以,这里我们首先知道了JS里的一种分类方式,就是将任务分为: 同步任务和异步任务


            虽然JS是单线程的但是浏览器的内核是多线程的£¬在浏览器的内核中不同的异步操作由不同的浏览器内核模块调度执行£¬异步操作会将相关回调添加到任务队列中¡£而不同的异步操作添加到任务队列的时机也不同£¬如 onclick, setTimeout, ajax 处理的方式都不同£¬这些异步操作是由浏览器内核的 webcore 来执行的£¬webcore 包含上图中的3种 webAPI£¬分别是 DOM Binding¡¢network¡¢timer模块¡£

            按照这种分类方式:JS的执行机制是

                首先判断js代码是同步还是异步,同步就进入主进程,异步就进入event table
                异步任务在event table中注册函数,当满足触发条件后,被推入event queue
                同步任务进入主线程后一直执行,直到主线程空闲时,才会去event queue中查看是否有可执行的异步任务,如果有就推入主进程中

            总结?#21644;?#27493;可以保证顺序一致£¬但是容易导致阻塞£»异步可以解决阻塞问题£¬但是会改变顺序性£¬根据不同的需要去写你的代码£¬



            公司网站建设中JS异步编程的四种方法

            回调函数£¬这是异步编程最基本的方法

            假定有两个函数f1和f2£¬后者等待前者的执行结果£¬如果f1是一个很耗时的任务£¬可以考虑改写f1£¬把f2写成f1的回调函数¡£

                function f1(callback){
                 
                ¡¡¡¡setTimeout(function () {
                 
                ¡¡¡¡    // f1的任务代码
                 
                ¡¡¡¡¡¡¡¡callback();
                 
                ¡¡¡¡}, 1000);
                }

                    采用这种方式£¬我们把同步操作变成了异步操作£¬f1不会堵塞程序运行£¬相当于先执行程序的主要逻辑£¬将耗时的操作推迟执行¡£

                    回调函数的优点是简单¡¢容易理解和部署£¬缺点是不利于代码的阅读和维护£¬各个部?#31181;?#38388;高度耦合£¨Coupling£©£¬流程会很混乱£¬而且每个任务只能?#20184;?#19968;个回调函数¡£

             
            二¡¢事件监听

            另一种思路是采用事件驱动模式¡£任务的执行不取决于代码的顺序£¬而取决于某个事件是否发生¡£

                f1.on('done', f2); 当f1发生done事件£¬就执行f2¡£
                 
                function f1(){
                 
                ¡¡¡¡setTimeout(function () {
                 
                ¡¡¡¡¡¡¡¡// f1的任务代码
                ¡¡¡¡¡¡¡¡f1.trigger('done');
                 
                ¡¡¡¡}, 1000);
                 
                }

                       f1.trigger('done')表示£¬执行完成后£¬立即触发done事件£¬从而开始执行f2¡£

                   这种方法的优点是比?#20808;?#26131;理解£¬可以绑定多个事件£¬每个事件可以?#20184;?#22810;个回调函数£¬而且可以"去耦合"£¨Decoupling£©£¬有利于实现模块化¡£缺点是整个程序都要变成事件驱动型£¬运行流程会变得很不清晰¡£

             
            三¡¢发布/订阅

            我们假定£¬存在一个"信号中心"£¬某个任务执行完成£¬就向信号中心"发布"£¨publish£©一个信号£¬其他任务可以向信号中心"订阅"£¨subscribe£©这个信号£¬从而知道什么时候自己可以开始执行¡£这就叫做"发布/订阅模式"£¨publish-subscribe pattern£©£¬又称"观察者模式"£¨observer pattern£©¡£我们可以通过查看"消息中心"£¬了解存在多少信号¡¢每个信号有多少订阅者£¬从而监控程序的运行¡£¡¡

                jQuery.subscribe("done", f2); //首先£¬f2向"信号中心"jQuery订阅"done"信号¡£
                 
                function f1(){
                 
                ¡¡¡¡setTimeout(function () {
                 
                ¡¡¡¡¡¡¡¡// f1的任务代码
                 
                ¡¡¡¡¡¡¡¡jQuery.publish("done"); //f1执行完成后£¬向"信号中心"jQuery发布"done"信号£¬引发f2的执行¡£
                 
                ¡¡¡¡}, 1000);
                 
                ¡¡¡¡}
                 
                jQuery.unsubscribe("done", f2); //f2完成执行后£¬也可以取消订?#27169;¨unsubscribe£©¡£

             
            四¡¢Promises对象

            Promises对象是CommonJS工作组提出的一种规范£¬目的是为异步编程提供统一接口¡£简单说£¬它的思想是£¬每一个异步任务返回一个Promise对象£¬该对象有一个then方法£¬允许?#20184;?#22238;调函数¡£

                f1().then(f2);
                 
                function f1(){
                 
                ¡¡¡¡var dfd = $.Deferred();
                 
                ¡¡¡¡setTimeout(function () {
                 
                ¡¡¡¡¡¡¡¡// f1的任务代码
                 
                ¡¡¡¡¡¡¡¡dfd.resolve();
                 
                ¡¡¡¡}, 500);
                 
                ¡¡¡¡return dfd.promise;
                 
                }

            回调函数变成了链式写法£¬程序的流程可以看得很清楚£¬而且有一整套的配套方法£¬可以实?#20013;?#22810;强大的功能¡£

                f1().then(f2).then(f3); //?#20184;?#22810;个回调函数
                f1().then(f2).fail(f3); //?#20184;?#21457;生错误时的回调函数

            如果一个任务已经完成£¬再添加回调函数£¬该回调函数会立即执行¡£所以£¬你不用担心是否错过了某个事件或信号¡£这种方法的缺点就是编写和理解£¬都相对比较难¡£



            js的回调函数的例子£»
            1£¬
            <script type="text/javascript">
                    //js的回调函数£¬
                    //定义一个方法£¬方法内写回掉函数的执行代码
                    function mSum (a,b,callback) {
                        callback(a+b);
                    }
                    //调用这个方法£¬并?#19968;?#21462;经过计算得到的值
                    mSum(1,2,function(sum) {
                        alert(sum);
                    });
                </script>

            2£¬
            /**callback回调函数的使用*/

            function fun1(callback){
            alert('执行会点函数前操作');//执行这里第二步
            if(typeof(callback)=='function'){
            callback();
            }
            }

            $(function(){
            alert(1);//先执行这里第一步
            fun1(function(){
            alert('执行回调函数主题内容吧');//最后执行这里
            })
            })

            /**callback回调函数的使用*/
            • 基于用户创新

              界面设计日新月异£¬梦创义坚?#21482;?#20110;用户需求的界面创新设计¡­¡­

            • 服务设计思维

              互联网的格局发生的改变£¬在我们进行设计服务?#22791;üÊ强?#34385;不同用户¡¢不同¡­¡­

            • 洞察用户心理

              洞察用户有意识和无意识的行为以及心理特征通过构造一系列的服务来促进¡­¡­

            • 查看更多 >>

            最新新闻Latest News

            中小型企业网站建设完应该如何营销
            很多中小型企业往往纠结于以下10个问题£º一¡¢我们起步比别?#36865;í£?#25105;们的¡­¡­
            做企业网站到底做给谁看£¿
            设计经常时不时的遇到一些企业客户£¬常常搞不清楚谁会真正看你的企业网¡­¡­
            传统企业进军移动互联网£¬从移动云网站开始
            移动互联网是移动通信和互联网融合的产物£¬其发展的重要基础便是智能手¡­¡­
            网站建设和运营五大细节决定用户黏性
            网站的成功离不开搜索引擎优化£¬更离不开最基础最根本的用户群体£¬如何¡­¡­
            2015年值得关注的电子商务5大趋势
            线上线下销售的界线正在变得越来越模糊¡£在2015年£¬这一趋势仍将继续¡£¡­¡­
            更多

            本站搜索关键词£º企业网站制作的js异步问题 | 北京网站建设 | 北京网站建设公司 | 北京网站建设中心 | 高端网站建设 | 电商网站建设 | 企业网站建设 | 手机网站建设 | 微站官网建设 | APP开发

            销售热线

            7x24小时全国售前咨询热线£º010-57281389

            7x24小时全国售后服务热线£º13020085953 15313016798

            手机 | 微信同号:18600846206   QQ£º523313456

            立即咨询¡¡网站建设业务咨询|客服热线:010-57281389 13020085953¡¡我要方案

            点这里给我发消息 电子邮箱£º[email protected]

            营业地址(东部)£º北京市朝阳区伊莎文心广场A座3层B-22

            位置分享

            营业地址(西部)£º北京市丰台区汽车博物馆东路1?#25490;?#24503;中心9-605

            标准网站,网站建设,域名注册,虚拟主机,独享主机,企业云邮箱,网站维护一条龙,北京网站建设中心


              扫一扫 加微信
              微信号:cnet99com

              扫一扫 加关注
              微?#29260;教?/div>

            天润飞华-专注于互联网?#25945;?#24314;设与服务领域 中国互联网?#25945;?#24314;设服务提供商

            万网阿里云金牌首席合作伙伴站点 全线代理万网阿里云产品及服务

            中国万网正式通过ISO9001国际标准质量体系?#29616;?/p>

            Copyright©1999-2019 天润飞华 京ICP备12009254号-3 京公网安备 11010502032407号

            °²»Õ¿ì3×ß„Ýͼ