JS同步与异步;
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同步与异步;的更多相关文章
- js同步、异步、回调的执行顺序以及闭包的理解
首先,记住同步第一.异步第二.回调最末的口诀 公式表达:同步=>异步=>回调 看一道经典的面试题: for (var i = 0; i < 5; i++) { setTimeout( ...
- js同步、异步、延时、无阻塞加载
一.同步加载 平常默认用的都是同步加载.如:<script src="http://yourdomain.com/script.js"></script> ...
- js同步和异步
JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事. JavaScript的单线程,与它的用途有关.作为浏览器脚本语言,JavaScript的主要用途是与用户互动,以及操作 ...
- 【Mocha.js 101】同步、异步与 Promise
前情提要 在上一篇文章<[Mocha.js 101]Mocha 入门指南>中,我们提到了如何用 Mocha.js 进行前端自动化测试,并做了几个简单的例子来体验 Mocha.js 给我们带 ...
- 关于js中的同步和异步
最近看到前端面试问到js中的同步和异步,这个问题该怎么回答? 梳理一下,js对于异步的处理,很多人的第一反应是ajax,这只能说是对了一半. 1.个人觉得,js中,最基础的异步是setTimeout和 ...
- js的事件循环机制:同步与异步任务(setTimeout,setInterval)宏任务,微任务(Promise,process.nextTick)
javascript是单线程,一切javascript版的"多线程"都是用单线程模拟出来的,通过事件循环(event loop)实现的异步. javascript事件循环 事件循环 ...
- js回调函数以及同步与异步
1. 背景介绍javascript的单线程特性由于javascript语言是一门“单线程”的语言,所以,javascript就像一条流水线,仅仅是一条流水线而已,要么加工,要么包装,不能同时进行多个任 ...
- JS中的同步和异步
javascript语言是一门“单线程”的语言,不像java语言,类继承Thread再来个thread.start就可以开辟一个线程,所以,javascript就像一条流水线,仅仅是一条流水线而已,要 ...
- js中的异步与同步,解决由异步引起的问题
之前在项目中遇到过好多次因为异步引起的变量没有值,所以意识到了认识js中同步与异步机制的重要性 在单线程的js中,异步代码会被放入一个事件队列,等到所有其他代码执行后再执行,而不会阻塞线程. 下面是j ...
随机推荐
- 集合总结二(LinkedList的实现原理)
一.概述 先来看看源码中的这一段注释,我们先尝试从中提取一些信息: Doubly-linked list implementation of the List and Deque interfaces ...
- Ajax(Asynchronous JavaScript )and xml
JavaScript的两种任务执行模式--同步(synchronous)和异步(Asynchronous) 同步模式 JavaScript的执行环境是单线程的,意味着一次只能执行一个任务,如果有多个任 ...
- 【转】使用VisualStudio完成自动化C++代码生成和编译工作(GacUI)
使用VisualStudio完成自动化C++代码生成和编译工作(GacUI) GacUI终于进入制作dll的阶段了.昨天上传了一个新的工程,在Vczh Library++3.0(E:\Code ...
- MVC Ajax.BeginForm 提交上传图片
吃水不忘挖井人,如果对你有帮助,请说声谢谢.如果你要转载,请注明出处.谢谢! 异步提交时,出现图片不能上传. 起初我定格在 System.Web.Mvc 中.查询源码时,也是没有问题的.那问题出现 ...
- CenterOS7.5中搭建wordpress
centeros7.5中搭建wordpress 1.环境 云平台:华为云 服务器操作系统:CentOS7.: 博客部署的服务器:Apache HTTP: 数据库:mysql: 框架:wordpress ...
- 黄聪:iOS $299刀企业证书申请的过程以及细节补充
最近申请了iOS的 299刀企业证书,相关过程有些问题,分享出来,以便后来人参考.申请的过程我主要参考了别人以前的文章,链接如下: 1.https://developer.apple.com/cn/s ...
- linux服务之apache篇(一)
1.apache介绍:使用率最高的网站服务器: URL:统一资源定位符: 端口:http:80 https:443 2.apache三种工作模式: prefork:一个线程处理一个请求(占用内存多 ...
- 网页导出PDF文件
转自-----出道诗人 var downPdf = document.getElementById("exportToPdf"); downPdf.onclick = functi ...
- 在consul上注册web服务
1. 创建web服务 IDEA->File->New->Project->Empty Project,project name取名provider,点击finish 2. 创建 ...
- Variables多种表达
Variables:TF基础数据之一,常用于变量的训练...重要性刚学TF就知道了 1.tf.Variable() tf.Variable(initial_value=None, trainable= ...