JavaScript中从setTimeout与setInterval到AJAX异步


Posted in Javascript onFebruary 13, 2017

setTimeout与setInterval执行

首先我们看一下以下代码打印结果

console.log(1);
setTimeout(function() { console.log(2); },100)
setTimeout(function() { console.log(3); },50)
console.log(4);

打印结果是 1、4、3、2,你可能觉得理所应当,那我们再看下下面这个例子

console.log(1);
setTimeout(function() { console.log(2); },0)
console.log(3);

这次的结果又会是什么呢?

1、3、2,不是1、2、3。到这里你可能会有疑惑了,明明定时器设置的时间为0,而且浏览器解析js是按照从上到下执行的,应该是1、2、3才对啊?

到这里我们要提一下浏览器的线程问题。

与js相关的浏览器线程有三个(注意:js解析是单线程) - js代码执行线程( 主线程 ) - UI渲染线程 - 事件循环线程

其中js代码执行线程与UI渲染线程两者是互斥的,也就是说js代码执行线程运行的时候,UI渲染线程会停止工作,这样做也是为了防止js中的DOM操作会导致两线程冲突;而事件循环线程比较特殊,接下来会根据setTimerout的执行过程进行讲解其作用。

回到上面的第一道题目

console.log(1);
 setTimeout(function() { console.log(2); },100)
 setTimeout(function() { console.log(3); },50)
 console.log(4);

 执行过程:

js主线程运行,遇到console.log(1),直接运行,在控制台输出结果;

主线程继续运行,然后遇到第一个setTimeout,接着setTimeout中的回调函数会被放入到一个事件队列中(这里的事件队里可以想象成一个备忘录,里面记录的全是一些需要做而未做的事);

遇到第二个setTimeout,其中的回调函数依然被加入到事件队列中;

执行console.log(4),到这里主线程的任务全部执行完毕,除了setTimeout里面的回调函数;

这个时候,我们还未说明的事件循环线程开始工作,它会去循环遍历事件队列(也就是我们的备忘录),如果事件队列中有回调函数,它就会将事件队列中的回调函数重新交给主线程;

主线程收到回调函数,然后开始执行函数体。(这里要注意,因为两个setTimeout本身有执行时间,所以在这里的时候就会根据时间的长短按顺序执行啦。)

  setInterval原理与之相同,不作另说。

总的来说,setTimeout与setInterval的执行会等到主线程的所有任务全部执行后,才会再执行其中的回调函数,所以在使用它们的时候也要注意,特别是在主线程中有特别耗时的任务的时候,两种定时器会被不可预测的延后。

讲到这里,大家有没有想到什么呢?

恩,就是异步,setTimeout的执行有没有一点异步的感觉呢?但又因为它必须是等到主线程全部执行完才会执行,所以可以称之为伪异步。

说到异步,我们还会想到AJAX,都说AJAX是异步,但是它异步的原理想必还不清楚的你应该有点兴趣了解的。

异步:简单说就是在处理某一件事的时候还可以去做别的事,比如:你在银行取号后等待取钱,在等待的过程中你还可以玩手机,和别人聊天等等,这个过程就是异步的。

AJAX 异步的原理

发送一个AJAX请求的时候,浏览器会有一个专门的线程来进行该任务;

而在AJAX中也是有回调函数的,比如请求成功后的回调,失败后的回调,这些回调函数与setTimeout中的回调一样会被推入到事件队列中;

浏览器接会再次提供一个县城接收AJAX请求返回的数据;

事件循环线程这时候知道事件队列中AJAX的回调函数能够被执行了,遍历事件队列,将其中的回调函数交回给js主线程;

主线程执行AJAX回调函数内部代码。

总的说来,AJAX的请求不会干扰到主线程任务的执行,它有自己专供的线程来处理其任务,就像是浏览器的亲儿子~~~

以上所述是小编给大家介绍的JavaScript中从setTimeout与setInterval到AJAX异步,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript常考语句107条收集
Mar 09 Javascript
javascript 多浏览器 事件大全
Mar 23 Javascript
js 3种归并操作的实例代码
Oct 30 Javascript
下雪了 javascript实现雪花飞舞
Aug 02 Javascript
Angularjs使用指令做表单校验的方法
Mar 31 Javascript
详解webpack4升级指南以及从webpack3.x迁移
Jun 12 Javascript
React和Vue中监听变量变化的方法
Nov 14 Javascript
JS基于开关思想实现的数组去重功能【案例】
Feb 18 Javascript
微信小程序Flex布局用法深入浅出分析
Apr 25 Javascript
js神秘的电报密码 哈弗曼编码实现
Sep 10 Javascript
JS一次前端面试经历记录
Mar 19 Javascript
如何制作自己的原生JavaScript路由
May 05 Javascript
Bootstrap选项卡学习笔记分享
Feb 13 #Javascript
jQuery Ajax全解析
Feb 13 #Javascript
jQuery中 bind的用法简单介绍
Feb 13 #Javascript
jquery实现轮播图效果
Feb 13 #Javascript
JS中解决谷歌浏览器记住密码输入框颜色改变功能
Feb 13 #Javascript
利用Javascript实现简单的转盘抽奖
Feb 13 #Javascript
简单实现js倒计时功能
Feb 13 #Javascript
You might like
随时给自己贴的图片加文字的php水印
2007/03/16 PHP
Yii框架form表单用法实例
2014/12/04 PHP
apache中为php 设置虚拟目录
2014/12/17 PHP
PHP的Socket网络编程入门指引
2015/08/11 PHP
php正则判断是否为合法身份证号的方法
2017/03/16 PHP
php读取XML的常见方法实例总结
2017/04/25 PHP
Laravel框架中VerifyCsrfToken报错问题的解决
2017/08/30 PHP
菜单效果
2006/10/14 Javascript
JS 动态加载脚本的4种方法
2009/05/05 Javascript
js更优雅的兼容
2010/08/12 Javascript
javascript变量作用域使用中常见错误总结
2013/03/26 Javascript
js 上下左右键控制焦点(示例代码)
2013/12/14 Javascript
jQuery选择器全集详解
2014/11/24 Javascript
jQuery实现鼠标悬停背景翻转的黑色导航菜单代码
2015/09/14 Javascript
Bootstrap Table使用整理(二)
2017/06/09 Javascript
利用Jasmine对Angular进行单元测试的方法详解
2017/06/12 Javascript
node文件批量重命名的方法示例
2017/10/23 Javascript
详解设置Webstorm 利用babel将ES6自动转码成ES5
2017/12/20 Javascript
JS开发自己的类库实例分析
2019/08/28 Javascript
vue登录注册实例详解
2019/09/14 Javascript
vuex管理状态 刷新页面保持不被清空的解决方案
2019/11/11 Javascript
在Vue中使用Echarts可视化库的完整步骤记录
2020/11/18 Vue.js
python数据封装json格式数据
2018/03/04 Python
TensorFlow实现AutoEncoder自编码器
2018/03/09 Python
详解将Django部署到Centos7全攻略
2018/09/26 Python
python根据url地址下载小文件的实例
2018/12/18 Python
Python基础教程之if判断,while循环,循环嵌套
2019/04/25 Python
css3旋转木马_动力节点Java学院整理
2017/07/12 HTML / CSS
建材业务员岗位职责
2013/12/08 职场文书
创建无烟单位实施方案
2014/03/29 职场文书
分公司负责人任命书
2014/06/04 职场文书
羽毛球比赛策划方案
2014/06/13 职场文书
超市促销活动总结
2014/07/01 职场文书
2015医德医风个人工作总结
2015/04/02 职场文书
python3实现Dijkstra算法最短路径的实现
2021/05/12 Python
python+opencv实现视频抽帧示例代码
2021/06/11 Python