for循环 + setTimeout 结合一些示例(前端面试题）

一、背景

最近在翻看以前的老书《node.js开发指南》，恰好碰到 for 循环 + setTimeout 的经典例子，于是重新梳理了思路并记录下。

二、写在前面，setTimeout 和 setInterval 的执行机制

在日常编码中，你会发现，给 setTimeout 和 setInterval 设定延迟时间往往并不准，或者干脆 setTimeout(function(){xxx},0) 也不是立马执行（特别是有耗时代码在前），这是因为 js 是单线程的，有一个事件队列机制，setTimeout 和 setInterval 的回调会到了延迟时间塞入事件队列中，排队执行。

setTimeout ：延时 delay 毫秒之后，啥也不管，直接将回调函数加入事件队列。

setInterval ：延时 delay 毫秒之后，先看看事件队列中是否存在还没有执行的回调函数（ setInterval 的回调函数），如果存在，就不要再往事件队列里加入回调函数了。

看下面示例：

for (var i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i);
  }, 1000);
}

结果：1 秒之后，同时输出 5 个 5。

因为 for 循环会先执行完（同步优先于异步优先于回调），这时五个 setTimeout 的回调全部塞入了事件队列中，然后 1 秒后一起执行了。

三、正文

接下来就是那道经典的代码：

for (var i = 0; i < 5; i++) {
  setTimeout(function (){
    console.log(i);
   },1000);
}

结果：5 5 5 5 5

为什么不是 1 2 3 4 5，问题出在作用域上。

因为 setTimeout 的 console.log(i); 的i是 var 定义的，所以是函数级的作用域，不属于 for 循环体，属于 global。等到 for 循环结束，i 已经等于 5 了，这个时候再执行 setTimeout 的五个回调函数（参考上面对事件机制的阐述），里面的 console.log(i); 的 i 去向上找作用域，只能找到 global下 的 i，即 5。所以输出都是 5。

解决办法：人为给 console.log(i); 创造作用域，保存i的值。

解决办法一

for (var i = 0; i < 5; i++) {
  (function(i){   //立刻执行函数
    setTimeout(function (){
      console.log(i);
     },1000);
  })(i);
}

这里用到立刻执行函数。这样 console.log(i); 中的i就保存在每一次循环生成的立刻执行函数中的作用域里了。

解决办法二

for (let i = 0; i < 5; i++) {   //let 代替 var
  setTimeout(function (){
    console.log(i);
   },1000);
}

let 为代码块的作用域，所以每一次 for 循环，console.log(i); 都引用到 for 代码块作用域下的i，因为这样被引用，所以 for 循环结束后，这些作用域在 setTimeout 未执行前都不会被释放。

四、补充

在写示例代码的过程中，发现一个语法点：

 function a(i){
  console.log(i);
 }
for (var i = 0; i < 5; i++) {
  setTimeout(a(i),1000);
}

报错：

TypeError: "callback" argument must be a function
at setTimeout (timers.js:421:11)
……

百度了下，原来 setTimeout 不支持传带参数的函数，可以再用一个匿名函数包装下它吧，见下面代码：

function a(i){
  console.log(i);
}
for (var i = 0; i < 5; i++) {
  setTimeout(function(){ //用匿名函数包装
    a(i);
  },1000);
}

总结

以上所述是小编给大家介绍的for循环 + setTimeout 结合一些示例(前端面试题），希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • JavaScript 定时器 SetTimeout之定时刷新窗口和关闭窗口(代码超简单)

    废话不多说了,直接给大家贴代码了. // 每隔五秒定时刷新当前窗口 setTimeout("self.location.reload();",5000); //js 定时关闭窗口(ie和FF中测试过) //6秒后自动关闭当前窗口 setTimeout("window.opener=null;window.close()",6000); 下面给大家介绍下javascript定时器使用 使用定时器实现JavaScript的延期执行或重复执行 window对象提供了两个方

  • jQuery的Each比JS原生for循环性能慢很多的原因

    其实查看jQuery的源代码,发现each的代码很简单,但为什么性能和原生的for循环相差几十倍呢? jQuery的each的核心代码 for (; i < length; i++) { value = callback.call(obj[i], i, obj[i]); if (value === false) { break; } } 看着很简单,但为什么会慢很多呢? 编写测试代码如下: var length=300000; function GetArr() { var t = []; fo

  • JS for循环中i++ 和 ++i的区别介绍

    平时都是这样写的for循环, for(var i = 0; i < 20 ; i++){ .... } 但我看有的人这样写 for (var i = 0; i < 20 ; ++i) { .... } 这样会对for循环有什么影响? 1.在for里好像没啥区别... 但是用在赋值的时候, 就有区别了... var a = 1; var b = a++; var c = 1; var d = ++c; console.log(b,d); // 1, 2 a++ 是先应用a, 然后再自加 ++a

  • JavaScript中setTimeout和setInterval函数的传参及调用

    如何向 setTimeout . setInterval 传递参数 看如下代码: var str = 'aaa'; var num = 2; function auto(num){ alert(num); } setTimeout('auto(num)',4000); 这样写是可以正常工作的,但是如其说这是参数传递,还不如说是直接使用的全局变量.所以,这种写法是没有必要的,一般情况下更多的是用到传递局部变量作为参数. 把代码修改一下: //var str = 'aaa'; var num = 2

  • 浅谈JavaScript for循环 闭包

    有个网友问了个问题,如下的html,为什么每次输出都是5,而不是点击每个p,就alert出对应的1,2,3,4,5. <html > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>闭包演示</title> <script type="text/javascript&quo

  • 快速掌握Node.js中setTimeout和setInterval的使用方法

    Node.js和js一样也有计时器,超时计时器.间隔计时器.及时计时器,它们以及process.nextTick(callback)函数来实现事件调度.今天先学下setTimeout和setInterval的使用. 一.setTimeout超时计时器(和GCD中的after类似) 在node.js中可以使用node.js内置的setTimeout(callback,delayMillSeconds,[args])方法.当调用setTime()时回调函数会在delayMillSeconds后 执行

  • JavaScript中关于for循环删除数组元素内容时出现的问题

    JavaScript中关于for循环删除数组元素内容时出现的问题

    昨天用for循环进行数组去重的时候出现的问题, 首先,用双重for循环把前一个和所有后面的元素进行比较,如果相等则删除. 但是,如果数组里面有三个以上连续相等的元素的时候,就会出现问题. var arr = [1,1,1,2,2]; for(var i=0; i<arr.length-1; i++){ for(var j=i+1; j<arr.length; j++){ if(arr[i] === arr[j]){ arr.splice(j,1); } } } document.write(&

  • 全面解析JavaScript里的循环方法之forEach，for-in，for-of

    JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能. JavaScript诞生已经有20多年了,我们一直使用的用来循环一个数组的方法是这样的: for (var index = 0; index < myArray.length; index++) { console.log(m

  • for循环 + setTimeout 结合一些示例(前端面试题）

    一.背景 最近在翻看以前的老书<node.js开发指南>,恰好碰到 for 循环 + setTimeout 的经典例子,于是重新梳理了思路并记录下. 二.写在前面,setTimeout 和 setInterval 的执行机制 在日常编码中,你会发现,给 setTimeout 和 setInterval 设定延迟时间往往并不准,或者干脆 setTimeout(function(){xxx},0) 也不是立马执行(特别是有耗时代码在前),这是因为 js 是单线程的,有一个事件队列机制,setTim

  • 整理一些最近经常遇到的前端面试题

    前言 本文主要整理了一些最近遇到的前端面试题,方便大家在面试前有所准备,文中给出了详细的解答,下面话不多说了,来看看详细的介绍吧. 1.标签属性中title和alt的区别 答: title是设置鼠标移动到图片上时显示的内容,而alt是用于当图片没有正常显示时出现的提示文字,另外alt还用于在seo中针对图片的优化说明. 2.隐藏元素的几种方法 答: 1.display:none; 2.visibility:hidden; 3.opacity:0; 4.position:absolute; lef

  • 收集前端面试题之url、href、src

    一.URL的概念 统一资源定位符(或称统一资源定位器/定位地址.URL地址等,英语:Uniform Resource Locator,常缩写为URL),有时也被俗称为网页地址(网址).如同在网络上的门牌,是因特网上标准的资源的地址(Address). 二.URL的格式 2.1 标准格式 协议类型:[//服务器地址[:端口号]][/资源层级UNIX文件路径]文件名?查询 2.2 完整格式 协议类型:[//[访问资源需要的凭证信息@]服务器地址[:端口号]][/资源层级UNIX文件路径]文件名?查询

  • JS前端面试题详解之手写bind

    目录 bind 的用法 this 的指向问题 积累参数 实现一个 bind 结尾 大家好,我是前端西瓜哥,今天我们用 JS 来实现内置的 bind 方法. bind 的用法 在实现之前,我们先学习一下 Function.prototype.bind 的用法. function.bind(thisArg[, arg1[, arg2[, ...]]]) bind 是函数特有的一个方法,可以创建一个绑定了 this 的新函数. 接受的参数为如下. 第 1 个参数 thisArg:用于修改 this 指

  • 常见前端面试题及答案

    常见前端面试题及答案

    前言 本文是在GitHub上看到一个大牛总结的前端常见面试题,很多问题问的都很好,很经典.很有代表性.上面没有答案,我就整理了一下,从网上找了一些相关问题的答案.里面有一部分问题的答案我也没有进行考证,不少答案都来源于网络,或许会有疏漏之处,仅供大家参考哦!(还有一部分问题答案还未整理,大家也可以自己搜索一下答案) 1.你能描述一下渐进增强和优雅降级之间的不同吗? 优雅降级:Web站点在所有新式浏览器中都能正常工作,如果用户使用的是老式浏览器,则代码会检查以确认它们是否能正常工作.由于IE独特的

  • 2019年度web前端面试题总结(主要为Vue面试题)

    2019年度web前端面试题总结(主要为Vue面试题)

    毕业之后就在一直合肥小公司工作,没有老司机.没有技术氛围,在技术的道路上我只能独自摸索.老板也只会画饼充饥,前途一片迷茫看不到任何希望.于是乎,我果断辞职,在新年开工之际来到杭州,这里的互联网公司应该是合肥的几十倍吧.... 刚来3天,面试了几家公司,有些规模比较小,有些是创业公司,也有些已经发展的不错了:今天把最近的面试题目做个汇总,也给自己复个盘,由于我的技术栈主要为Vue,所以大部分题目都是Vue开发相关的. 1. 谈谈你对MVVM开发模式的理解 MVVM分为Model.View.View

  • 前端面试题及答案整理(二)

    Part1 CSS相关 1 内联元素(inline-element)和块元素(block element)分别有哪些 常见内联元素(行内元素)有a.b.span.i .em.input.select .img等 常见的块元素有div.ul.li.h1~h6.talbe.ol. ul.td.p等 2 浮动相关 浮动布局指将元素脱离普通流/文档流,使其可以左右移动,直至它的外边缘遇到包含框或者另一个浮动框的边缘.浮动框不属于文档中的普通流,当一个元素浮动之后,不会影响到块级元素的布局而只会影响内联元

  • js前端面试题及答案整理（一）

    Part1 手写代码 现场手写代码是现在面试中很常见的一类面试题,考察基础的数据结构与算法能力. 1 数组去重的实现 基本数组去重 Array.prototype.unique = function(){ var result = []; this.forEach(function(v){ if(result.indexOf(v) < 0){ result.push(v); } }); return result; } •利用hash表去重,这是一种空间换时间的方法 Array.prototyp

  • Vue实现一种简单的无限循环滚动动画的示例

    Vue实现一种简单的无限循环滚动动画的示例

    本文主要介绍了Vue实现一种简单的无限循环滚动动画的示例,分享给大家,具体如下: 先看实现效果: 这种类似轮播的效果,通常可以使用轮播的方案解决,只不过相对于我要分享的方案来说,轮播实现还是要复杂些的. Vue提供了一种过渡动画transition-group,这里我便是利用的这个效果 // template <transition-group name="list-complete" tag="div"> <div v-for="v i

  • Go语言中循环语句使用的示例详解

    Go语言中循环语句使用的示例详解

    目录 一.概述 1. 循环控制语句 2. 无限循环 二.Go 语言 for 循环 1. 语法 2. for语句执行过程 3. 示例 4. For-each range 循环 三.循环嵌套 1. 语法 2. 示例 四.break 语句 1. 语法 2. 示例 五. continue 语句 1. 语法 2. 示例 六.goto 语句 1. 语法 2. 示例 一.概述 在不少实际问题中有许多具有规律性的重复操作,因此在程序中就需要重复执行某些语句. 循环程序的流程图: Go 语言提供了以下几种类型循环

随机推荐