setTimeout异步加载
两道经典的面试题,直接上代码
for(var i=0; i<3; i++){
setTimeout(function(){
i+=i;
console.log(i);
},1000)
}
var i = 1;
console.log(i);
会输出什么呢?先想一想,记下答案。继续下一题
for(var i=0; i<3; i++){
setTimeout(function(){
i+=i;
console.log(i);
},1000)
}
console.log(i);
改动很少,结果却相差甚远。先公布正确答案,第一段代码输出:1,2,4,8; 第二段代码输出:3,6,12,24。
意不意外?刺不刺激?惊不惊喜?
【代码解析】
首先,不要被定时器干扰,误以为它有延迟才会导致这样的结果,你可以尝试把延迟改成“0”或者去掉不写,结果依然相同。
引入一个概念-->异步,脱离当前事件队列的处理程序,而且必须等到正常队列里的事件完成后才会执行。
再来分析以上代码,
第一个,看到setTimeout,就知道知道它会在代码块的for循环及最后一个console.log完成后才执行,而且执行三次。毫无疑问,会先输出1,此时 i 的值为 1,再开始执行setTimeout进程,分别输出2,4,8.
第二个,需要对闭包有一定理解,js中的for循环是不存在私有作用域的,所以for循环最后结束时 i = 3,然后再执行setTimeout,依次是6,12,24.
setTimeout异步加载的更多相关文章
- 向上滚动或者向下滚动分页异步加载数据(Ajax + lazyload)[上拉加载组件]
/**** desc : 分页异步获取列表数据,页面向上滚动时候加载前面页码,向下滚动时加载后面页码 ajaxdata_url ajax异步的URL 如data.php page_val_name a ...
- JS -- 异步加载进度条
今天在博客园问答里面看到博友问道怎么实现Ajax异步加载产生进度条. 很好奇就自己写了一个. 展现效果: 1) 当点击Load的时候,模拟执行异步加载. 浏览器被遮挡. 进度条出现. 实现思路: 1. ...
- iframe异步加载技术及性能
我们会经常使用iframes来加载第三方的内容.广告或者插件.使用iframe是因为它可以和主页面并行加载,不会阻塞主页面.当然使用iframe也是有利有弊的:Steve Souders在他的blog ...
- 动态加载(异步加载)jquery/MUI类库 页面加载完成后加载js类库
动态加载Mui类库: // ==UserScript== // @name // @version 1.4.0 // @author zzdhidden@gmail.com // @namespace ...
- 深入理解JS异步编程五(脚本异步加载)
异步脚本加载 阻塞性脚本 JavaScript在浏览器中被解析和执行时具有阻塞的特性,也就是说,当JavaScript代码执行时,页面的解析.渲染以及其他资源的下载都要停下来等待脚本执行完毕 浏览器是 ...
- echarts异步加载柱状图遇到的错误- Error: Component series. not exists. Load it first.
今天看了下echarts教程之中的异步加载柱状图,我按照教程中的代码敲出来之后再运行,就报了一个 Error: Component series. not exists. Load it first. ...
- Javascript 异步加载详解(转)
本文总结一下浏览器在 javascript 的加载方式. 关键词:异步加载(async loading),延迟加载(lazy loading),延迟执行(lazy execution),async 属 ...
- Javascript 异步加载详解
Javascript 异步加载详解 本文总结一下浏览器在 javascript 的加载方式. 关键词:异步加载(async loading),延迟加载(lazy loading),延迟执行(lazy ...
- javascript异步加载详解(转)
本文总结一下浏览器在 javascript 的加载方式. 关键词:异步加载(async loading),延迟加载(lazy loading),延迟执行(lazy execution),async 属 ...
随机推荐
- Java线程池(ThreadPool)详解
线程五个状态(生命周期): 线程运行时间 假设一个服务器完成一项任务所需时间为:T1 创建线程时间,T2 在线程中执行任务的时间,T3 销毁线程时间. 如果:T1 + T3 远大于 T2,则可以 ...
- 使用上传插件 Web Uploader 上传图片到七牛云(C#)
之前有写过一篇文章,基于asp.net mvc 封装 Web Uploader 上传插件: http://www.cnblogs.com/vanteking/p/5623682.html 已经实现的功 ...
- Extjs6组件——Form大家族成员介绍
本文基于ext-6.0.0 一.xtype form一共有12种xtype,下面来一一举例说一下. 1.textfield 这个是用的最多的form之一. { xtype: 'textfield', ...
- Excel 中使用sql语句查询
将Excel连接Oracle数据库 Excel选项板中"数据"—"自其他来源"下拉菜单中有有个可以连接其它数据库的选项"来自数据连接向导"和 ...
- 03(1) Gaussians,GMMs基础
1.单成分单变量高斯模型 2.单成分多变量高斯模型 若协方差矩阵为对角矩阵且对角线上值相等,两变量高斯分布的等值线为圆形 若协方差矩阵为对角矩阵且对角线上值不等,两变量高斯分布的等值线为椭圆形, 长轴 ...
- JS模式---命令模式
var opendoor = { execute: function () { console.log("开门"); } }; var closedoor = { execute: ...
- 【算法系列学习】[kuangbin带你飞]专题十二 基础DP1 E - Super Jumping! Jumping! Jumping!
https://vjudge.net/contest/68966#problem/E http://blog.csdn.net/to_be_better/article/details/5056334 ...
- ABP官方文档翻译 2.5 设置管理
设置管理 介绍 关于 ISettingStore 定义设置 设置范围 重写设置定义 获取设置值 服务端 客户端 更改设置 关于缓存 介绍 每个应用都需要存储设置,并且在应用的某些地方需要使用这些设置. ...
- 关于mysql表中有大文本limit慢的优化
问题场景: 商品表goods,里面有几个大文本字段,类型用的MediumText,表中记录28万多.分页查询时用limit,在一般PC上需要12秒左右,这个数量级的数据不应该这么慢. 原因分析: 几个 ...
- C#基础知识-数据类型(一)
俗话说温故而知新,学习一门知识最好的方法就是不断的去咀嚼回味,学习编程更是如此.对于.NET平台中的C#语言而言,有着强大的类库.不断的在更新迭代几乎每隔一年都会更新一个新的模块,.NET Framw ...