JS的同步与异步

同步:代买从上往下的执行

异步:每个模块各执行各的,同时执行,互不干扰

四个异步事件:(1)定时器(2)ajax(3)时间的绑定(4)回调函数

现在用定时器来说一说setTimeOut事件的同步和异步

for (var i = 0; i < 5; i++) {
setTimeout(function() {
console.log(i);
}, 1000);
}
console.log(i);

以上函数的输出结果无非是两种:(1)0 1 2 3 4 5 5 (2)5 5 5 5 5 5 5

但是结果显然是第二种

首先看一下学习同步异步的方法:

同步优先、异步靠边、回调垫底

用公式表达就是:同步 => 异步 => 回调

然后就可以得知:

1)for循环和循环体外部的console是同步的,所以先执行for循环,再执行外部的console.log。(同步优先)

2)for循环里面有一个setTimeout回调,他是垫底的存在,只能最后执行。(回调垫底)

那么,为什么我们最先输出的是5呢?

这个也是非常好理解,for循环先执行,但是不会给setTimeout传参(回调垫底),等for循环执行完,就会给setTimeout传参,而外部的console打印出5是因为for循环执行完成了
那么解决的办法都有哪些呢?

(1)闭包

for (var i = 1; i <=20; i++){
(function (i) {
setTimeout(function timer()

console.log(i);
}, i*1000)
})(i);
}
(2)把他的每个得索引值存到一个属性里

for (var i = 0; i < 5; i++) {
setTimeout(function() {

var i.index=i;
console.log(this);
}, 1000);
}
console.log(i);

可能解决的办法还有更多,持续更新吧...

JS同步与异步;的更多相关文章

  1. js同步、异步、回调的执行顺序以及闭包的理解

    首先,记住同步第一.异步第二.回调最末的口诀 公式表达:同步=>异步=>回调 看一道经典的面试题: for (var i = 0; i < 5; i++) { setTimeout( ...

  2. js同步、异步、延时、无阻塞加载

    一.同步加载 平常默认用的都是同步加载.如:<script src="http://yourdomain.com/script.js"></script> ...

  3. js同步和异步

    JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事. JavaScript的单线程,与它的用途有关.作为浏览器脚本语言,JavaScript的主要用途是与用户互动,以及操作 ...

  4. 【Mocha.js 101】同步、异步与 Promise

    前情提要 在上一篇文章<[Mocha.js 101]Mocha 入门指南>中,我们提到了如何用 Mocha.js 进行前端自动化测试,并做了几个简单的例子来体验 Mocha.js 给我们带 ...

  5. 关于js中的同步和异步

    最近看到前端面试问到js中的同步和异步,这个问题该怎么回答? 梳理一下,js对于异步的处理,很多人的第一反应是ajax,这只能说是对了一半. 1.个人觉得,js中,最基础的异步是setTimeout和 ...

  6. js的事件循环机制:同步与异步任务(setTimeout,setInterval)宏任务,微任务(Promise,process.nextTick)

    javascript是单线程,一切javascript版的"多线程"都是用单线程模拟出来的,通过事件循环(event loop)实现的异步. javascript事件循环 事件循环 ...

  7. js回调函数以及同步与异步

    1. 背景介绍javascript的单线程特性由于javascript语言是一门“单线程”的语言,所以,javascript就像一条流水线,仅仅是一条流水线而已,要么加工,要么包装,不能同时进行多个任 ...

  8. JS中的同步和异步

    javascript语言是一门“单线程”的语言,不像java语言,类继承Thread再来个thread.start就可以开辟一个线程,所以,javascript就像一条流水线,仅仅是一条流水线而已,要 ...

  9. js中的异步与同步,解决由异步引起的问题

    之前在项目中遇到过好多次因为异步引起的变量没有值,所以意识到了认识js中同步与异步机制的重要性 在单线程的js中,异步代码会被放入一个事件队列,等到所有其他代码执行后再执行,而不会阻塞线程. 下面是j ...

随机推荐

  1. JDK8安装与配置

    如果是免安装包 配置方法 1.配置java环境变量 注意:jdk文件夹名字取名不要用汉语取名. 1)鼠标右键点击我的电脑(计算机)选择属性栏 2)再点击左边高级系统设置 3)点击环境变量 4)在系统变 ...

  2. Fiddler: 如何抓取HTTPS协议的网页

    作者:韦玮  转载请注明出处 Fiddler默认只能抓取HTTP协议的网页,不能抓取HTTPS协议的网页,而我们很多时候,都需要抓HTTPS协议的网页,比如抓淘宝数据等.今天,韦玮老师会为大家讲解如何 ...

  3. AR外包,就找北京动点软件,长年承接AR外包(案例丰富可签合同,内附案例演示)

    北京团队长年承接AR项目外包 咨询QQ:372900288  微信:liuxiang0884 以下是AR项目案例演示,索取更多案例请通过以上方式在线联系我们

  4. gcc centos 新版本的安装方法

    因为centos默认安装的gcc是GCC 4.*.* 是不支持 C++11 的,所以有些新的程序或软件要安装就行要升级GCC,否则无法编译通过 一.如下步骤安装不成功(yum install devt ...

  5. android 获取对权限的选择

    一般是第三方软件拦截,再次提示给用户,确认权限的,如360等.(PS 没有设置权限的app 是会崩溃的  ,而是不是弹出权限确认,因为你都没设置这个权限)看了网上很多,确切说没有一个适合我的. 其实用 ...

  6. Reference.svcmap: Could not load file or assembly

    Reference.svcmap: Could not load file or assembly 在添加服务的时候出现如上错误, 把这个勾去掉就可以了.

  7. 理解OpenShift(1):网络之 Router 和 Route

    理解OpenShift(1):网络之 Router 和 Route 理解OpenShift(2):网络之 DNS(域名服务) 理解OpenShift(3):网络之 SDN 理解OpenShift(4) ...

  8. IDEA2016 maven项目配置Junit

    添加插件:File->Settings->Plugins 设置生成模式:File->Settings->Other Settings 修改模板:File->Setting ...

  9. Linux运维人员最常用166个命令汇总

    引用自“菜鸟博客” 命令 功能说明 线上查询.帮助命令(2个) man 查看命令帮助,命令词典,更复杂还有info,但不常用. help 查看Linux内置命令的帮助,比如cd等命令. 文件.目录操作 ...

  10. ARM920T的Cache

    转载自:http://www.eefocus.com/mcu-dsp/242034 ARM920T有16K的数据Cache和16K的指令Cache,这两个Cache是基本相同的,数据Cache多了一些 ...