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 属 ...
随机推荐
- 【CSS】如何用css做一个爱心
摘要:HTML的标签都比较简单,入门非常的迅速,但是CSS是一个需要我们深度挖掘的东西,里面的很多样式属性掌握几个常用的便可以实现很好看的效果,下面我便教大家如何用CSS做一个爱心. 前期预备知识: ...
- hadoop、Storm该选哪一个
如果hadoop.Storm还感觉混要,那么此篇文章将帮助你把他们完全区分 可以带着下面问题来阅读本文章: 1.hadoop.Storm各是什么运算 2.Storm为什么被称之为流式计算系统 3.ha ...
- cookie和session的区别异同
1.用于保存页面信息:如自动登录,记住用户名 2.对于同一个网站只有一套cookie,它是以域名为单位的,一个域名就是一套,数量大小有限4k-10k,同时会具有过期时间 3.JS中通过document ...
- Maven(二)之Maven项目构建演练
从上一篇的讲解中我们知道了什么是Maven,然后它的安装配置,到修改本地仓库,这篇我们用一个实际的例子,带领大家走进我们的Maven之旅.让我们一起来体验一下Maven的高度自动化构建项目的过程. 一 ...
- WPF触屏Touch事件在嵌套控件中的响应问题
前几天遇到个touch事件的坑,记录下来以增强理解. 具体是 想把一个listview嵌套到另一个listview,这时候如果list view(子listview)的内容过多超过容器高度,它是不会出 ...
- 使用jquery的load方法设计动态加载,并解决浏览器前进、后退、刷新等问题
继上一篇 使用jquery的load方法设计动态加载,并解决被加载页面JavaScript失效问题 解决了后台业务系统的部分动态加载问题,然而该框架离正常的用户体验还存在一些问题,如:浏览器的前进.后 ...
- vue的Virtual Dom实现- snabbdom解密
vue在官方文档中提到与react的渲染性能对比中,因为其使用了snabbdom而有更优异的性能. JavaScript 开销直接与求算必要 DOM 操作的机制相关.尽管 Vue 和 React 都使 ...
- [ABP实战开源项目]--YoYoCms目录
ABP是"ASP.NET Boilerplate Project (ASP.NET样板项目)"的简称. ASP.NET Boilerplate是一个用最佳实践和流行技术开发现代WE ...
- Centos7 ftp环境搭建
没玩过linux,折腾了半天的ftp,好不容易亲测通过了.不容易啊. 操作环境:vm虚拟机 centos7 首先:搞定网络问题:默认情况下使用ifconfig可以看到虚拟机下是无网络的.(注:虚拟机网 ...
- JavaScript常用的方法和函数(setInterval和setTimeout)
1.setInterval:计时器 可以按照指定的周期(以毫秒为单位)来调用函数或计算表达式 调用格式:setinterval(fun,time) 说明:fun为函数体,time为数值,这两个参数是必 ...