专业网站建设品牌,十四年专业建站经验,服务6000+客户--广州京杭网络
免费热线:400-683-0016
微信咨询
|
联系我们
扫二维码关注公众号
网站首页
网站建设
短视频
网站推广
网站模板
客户案例
资讯动态
关于我们
网站首页
网站建设
短视频
网站推广
网站模板
客户案例
资讯动态
关于我们
企业网站制作的js异步问题
当前位置:
网站建设
>
优化推广
企业网站制作的js异步问题
资料来源:网络整理
时间:
2023/3/21 5:33:58
共计:
3589
浏览
分享数:
0
企业网站制作的
js
单线程为什么会有'异步'问题
看完前面的铺垫你是否会产生这些疑问,JS是单线程的,那么他是如何是实现异步操作的?AJAX异步发送和回调请求,还有setTimeout也看起来像是多线程的?不急慢慢来
js
是同步的?
是的,单线程,那肯定只能同步(排队)执行咯
js
为什么需要异步?
如果JS中不存在异步,只能自上而下执行,万一上一行解析时间很长,那么下面的代码就会被阻塞。
对于用户而言,阻塞就意味着"卡死",这样就导致了很差的
用户体验
js
单线程又是如何实现异步的呢?
通过 事件循环(event loop) 实现'异步'
经典问题:
console.log('1')
setTimeout(function(){
console.log('2')
},0)
console.log('3')
// 1,3,2
也就是说,setTimeout里的函数并没有立即执行,而是延迟了一段时间,满足一定条件后,才去执行的,这类代码,我们叫异步代码。
所以,这里我们首先知道了JS里的一种分类方式,就是将任务分为: 同步任务和异步任务
也就是说,setTimeout里的函数并没有立即执行,而是延迟了一段时间,满足一定条件后,才去执行的,这类代码,我们叫异步代码。
所以,这里我们首先知道了JS里的一种分类方式,就是将任务分为: 同步任务和异步任务
虽然JS是单线程的但是浏览器的内核是多线程的,在浏览器的内核中不同的异步操作由不同的浏览器内核模块调度执行,异步操作会将相关回调添加到任务队列中。而不同的异步操作添加到任务队列的时机也不同,如 onclick, setTimeout, ajax 处理的方式都不同,这些异步操作是由浏览器内核的
web
core 来执行的,
web
core 包含上图中的3种
web
API,分别是 DOM Binding、network、timer模块。
按照这种分类方式:JS的执行机制是
首先判断
js
代码是同步还是异步,同步就进入主进程,异步就进入event table
异步任务在event table中注册函数,当满足触发条件后,被推入event queue
同步任务进入主线程后一直执行,直到主线程空闲时,才会去event queue中查看是否有可执行的异步任务,如果有就推入主进程中
总结:同步可以保证顺序一致,但是容易导致阻塞;异步可以解决阻塞问题,但是会改变顺序性,根据不同的需要去写你的代码,
公司网站建设中JS异步编程的四种方法
回调函数,这是异步编程最基本的方法
假定有两个函数f1和f2,后者等待前者的执行结果,如果f1是一个很耗时的任务,可以考虑改写f1,把f2写成f1的回调函数。
function f1(callback){
setTimeout(function () {
// f1的任务代码
callback();
}, 1000);
}
采用这种方式,我们把同步操作变成了异步操作,f1不会堵塞程序运行,相当于先执行程序的主要逻辑,将耗时的操作推迟执行。
回调函数的优点是简单、容易理解和部署,缺点是不利于代码的阅读和维护,各个部分之间高度耦合(Coupling),流程会很混乱,而且每个任务只能指定一个回调函数。
二、事件监听
另一种思路是采用事件驱动模式。任务的执行不取决于代码的顺序,而取决于某个事件是否发生。
f1.on('done', f2); 当f1发生done事件,就执行f2。
function f1(){
setTimeout(function () {
// f1的任务代码
f1.trigger('done');
}, 1000);
}
f1.trigger('done')表示,执行完成后,立即触发done事件,从而开始执行f2。
这种方法的优点是比较容易理解,可以绑定多个事件,每个事件可以指定多个回调函数,而且可以"去耦合"(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完成执行后,也可以取消订阅(unsubscribe)。
四、Promises对象
Promises对象是CommonJS工作组提出的一种规范,目的是为异步编程提供统一接口。简单说,它的思想是,每一个异步任务返回一个Promise对象,该对象有一个then方法,允许指定回调函数。
f1().then(f2);
function f1(){
var dfd = $.Deferred();
setTimeout(function () {
// f1的任务代码
dfd.resolve();
}, 500);
return dfd.promise;
}
回调函数变成了链式写法,程序的流程可以看得很清楚,而且有一整套的配套方法,可以实现许多强大的功能。
f1().then(f2).then(f3); //指定多个回调函数
f1().then(f2).fail(f3); //指定发生错误时的回调函数
如果一个任务已经完成,再添加回调函数,该回调函数会立即执行。所以,你不用担心是否错过了某个事件或信号。这种方法的缺点就是编写和理解,都相对比较难。
js
的回调函数的例子;
1,
<script type="text/javascript">
//
js
的回调函数,
//定义一个方法,方法内写回掉函数的执行代码
function mSum (a,b,callback) {
callback(a+b);
}
//调用这个方法,并且获取经过计算得到的值
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回调函数的使用*/
TAG标签耗时:0.011766910552979 秒
版权说明:
本网站凡注明“广州京杭 原创”的皆为本站原创文章,如需转载请注明出处!
本网转载皆注明出处,遵循行业规范,如发现作品内容版权或其它问题的,请与我们联系处理!
欢迎扫描右侧微信二维码与我们联系。
相关主题:
如何设计制作优秀外贸网站
昆明外贸网站建设制作
台州外贸网站设计哪家强
外贸网站后台订单号
番禺外贸网站优化推广技巧
湛江外贸网站推广哪家好
河源外贸网站推广有哪些
万源外贸网站设计
外贸网站生意怎么样
禅城外贸网站推广报价
·上一条:
微信公众号运营技巧
|
·下一条:
Android开发UI设计问题解决方法
同类资讯
微信公众号运营技巧
人工智能时代的智慧校园建设
Android开发性能优化
人工智能时代知识图谱的应用
网站数据库连接池作用及配置
Android应用程序的生命周期和网络优化
网站建设自动刷新页面的方法
人工智能在智慧零售业的应用
电器行业网站建设方案及注意问题
商业智能与大数据应用
网站免费直播编码推流软件
手机APP开发框架的选择
iOS 响应式架构设计方案
人工智能在公共安全方面的应用
博物馆类网站建设的几点建议
网站设计中简约趋势的未来和实现方法
网站建设中,如何利用颜色来提高转化率
网站建设中需要考虑的因素
成功品牌如何设计其网站标题
在网站建设中,网页设计之所以重要的4个原因
资讯动态
公司新闻
互联网资讯
电商资讯
优化推广
技术支持
关于我们
公司简介
企业文化
服务项目
公司新闻
服务项目
网站建设
网站推广
品牌策划
移动应用
服务支持
在线咨询
服务流程
产品报价
售后服务
联系我们
代理加盟
付款方式
在线留言
联系方式
联系方式
电话:400-683-0016
邮箱:sales@gzit.cn
QQ:250211130
微信:18520775521
Copyright © 广州京杭网络科技有限公司 2005-2025 版权所有
粤ICP备16019765号
广州京杭网络科技有限公司 版权所有
返回顶部
400-683-0016
在线咨询
微信二维码