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 属 ...
随机推荐
- druid 连接kafuk
java -Xmx256m -Duser.timezone=UTC -Dfile.encoding=UTF-8 -Ddruid.realtime.specFile=examples/indexing/ ...
- 鸟哥linux私房菜学习笔记,U盘安装centos5.3不能正常引导的问题
前言: 一直都想学习linux,毕竟是做测试的标配.听过鸟哥的linux私房菜大名,作为新手我淘来了第三版,到手看到书的厚度,心都凉了半截,本着不能浪费的原则,还是学吧! 过程: 开始看 ...
- HTML基础的基础
今天咱们来看一下有关HTML的相关基础内容 学过.net的对HTML不会陌生 但是对于想单纯的了解下HTML的可能对他不是很了解 男的可以这么理解HTML=How To Make Love 咳咳,请上 ...
- 打印星号(*)三角形(C# Linq实现)的小例子
以前看面试宝典(C#)的时候,记得有一道题是打印三角形的.比如下图: 记得那时候刚学C#花了我好长时间才做出来,那是用的方法没有使用到linq,现在使用Linq重新做一次.以下是代码: ; ; i & ...
- 【转】JDBC学习笔记(9)——DBUtils的使用
转自:http://www.cnblogs.com/ysw-go/ 使用DBUtils提供的功能需要使用commons-dbutils-1.6.jar这个JAR包,在Apache官网可以下载到 使用D ...
- STM32实战应用(一)——1602蓝牙时钟1液晶的显示测试
前言 从51到STM32F4学习这么久了,总算找到点头绪了,目前学习了GPIO,中断,定时器,看门狗的基本使用,所以想试着看看能不能做个什么东西,就是想复习一下最近学习的知识.正好上学期单片机课程设计 ...
- 仿QQ空间和微信朋友圈,高解耦高复用高灵活
先看看效果: 用极少的代码实现了 动态详情 及 二级评论 的 数据获取与处理 和 UI显示与交互,并且高解耦.高复用.高灵活. 动态列表界面MomentListFragment支持 下拉刷新与上拉加载 ...
- 兼容IE6/7/8/9的css3插件
<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <tit ...
- c标签和foreach循环不能加载
需要同时导入2个包: jstl.jar和standard.jar(大多数时候只会注意到jstl包,而忽视了standard包) 代码: c标签的写法 <%@ taglib prefix=&quo ...
- 【原创】bootstrap框架的学习 第六课[bootstrap代码]
Bootstrap 允许您以两种方式显示代码: 第一种是 <code> 标签.如果您想要内联显示代码,那么您应该使用 <code> 标签. 第二种是 <pre> 标 ...