Posts List

从一道面试题谈谈 setTimeout 和 setInterval

最近有看到一道题目,使用 JavaScript,隔一秒打印一个数字,比如第 0 秒打印 0,第 1 秒打印 1 等等,如何去实现? 假如我们尝试使用 setTimeout 去实现: for (var i = 0; i < 5; i++) { setTimeout(function() { console.log(i); }, i * 1000); } 这样可以么,执行的结果是什么呢?你可以将这段代码粘贴到 浏览器的 Console 中运行一下。结果是,每隔一秒打印一个 5 ,一共打印 5 次。这是为什么呢,为什么不是打印 0, 1, 2, 3, 4 呢?众所周知,JavaScript 是一种单线程语言,主线程的语句和方法会阻塞定时任务的执行,在 JavaScript 执行引擎之外,存在一个任务队列。当代码中调用 setTimeout 方法时,注册的延时方法会挂在浏览器其他模块处理,等达到触发条件是,该模块再将要执行的方法添加到任务队列中。这个过程是与执行引擎主线程独立,只有在主线程方法全部执行完毕的时候,才会从该模块的任务队列中提取任务来执行。这就是为什么 setTimeout 中函数延迟执行的时间往往大于设置的时间。 因此,对于上述的代码块,每一个 setTimeout 函数都被添加到了任务队列中。然后,这还涉及到了函数作用于的问题。因为当任务队列中的函数执行的时候,其作用域其实是全局作用域。setTimeout 中的打印函数执行的时候就会在全局作用域中寻找变量 i,而此时全局作用域的变量 i 的值已经变成 5 了。这也就是为什么打印的数字都是 5。那么应该如何达到我们一开始预期的效果呢?这里我们就需要考虑到函数执行上下文的问题,可以通过立即执行函数(IIFE)来改变函数作用域。 for (var i = 0; i < 5; i++) { (function(i) { setTimeout(function() { console.

前端面试题——系列一

html语义话 定义文章 定义页面内容之外的内容 定义声音内容 定义图形 定义命令按钮 定义下拉列表 定义元素的细节 定义对话框或者窗口 定义figure元素标题 定义媒介内容的分组以及它们的标题 定义section或page的页脚 定义section或page的页眉 定义有记号的文本 定义预定义范围内的度量 定义导航链接 定义任何类型的进度条 为元素定义可见的标题 定义日期/时间 定义视频 img标签alt属性和title属性的区别 alt属性是图片在因浏览器兼容、加载失败活着地址出错等原因无法显示为浏览用户所做的代替语言,其性质为图片的代替;而title属性是表达该图片的一些额外信息,其性质为一种备注或注释,鼠标过去显示该文字。 css布局 常见的布局有四种:表格布局,浮动布局,css框架,flexbox 两列布局,三列布局可以由浮动来实现 css3已经实现了多列布局,主要属性包括 column-count column-gap column-rule-style column-rule-width column-rule-color column-rule column-span column-width div{ -webkit-column-count: 3; Chorome, Safari, Opera -moz-column-count :3; Firefox -column-count:3; } 清除浮动的知识 在浮动元素后面增加标签 在浮动元后面增加一个清楚浮动层: 给浮动元素添加 overflow:auto样式 为最后浮动元素设置如下样式: .clearfix:after{ visibility:hidden; display:block; content:” “; clear:both; height:0; } .