我们这次使用setTimeout来实现一个按照时间定时,依次打印数值的例子.其实在早期的时候,也是我经常犯的一个错误,或者实现这种能力,似乎js比较牵强,其实是我的错,哈哈!没能理解JS强大之处.我们直接进入主题吧!

注意,如果用setInterval来实现的话,那肯定很简单,这次我们是使用setTimeout.

我们先从最简单思考入手.那就会写出下面的代码.

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

这段代码虽然依次打印了,每个i的值0,1,2,3,4.但是,执行的时间却没有起作用.为什么呢? 因为 console.log() 是方法的执行调用,在调用这个方法后,当是马上执行!,所以没有达到我们预期的目的

那我们继续看下面一段代码

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

这里我们使用一个匿名函数包含了打印的console.log来打印i,所以 i这个值是共享的,还没等到执行第一个setTimeout的时候,for循环已经执行完成,最后的i = 5,所以i 会打印四次

其实我们两种解决办法,我们先来看第一种:

 var j = 0;
function abc(){
console.log("j = "+j);
j++;
} for(var i = 0; i < 10; i++ ){
setTimeout(abc,i*1000)
}

这里我们另外一个全局变量来存储值,每执行一次函数abc,j就加一次,所以执行到setTimeout的时候,就会调用abc函数,所以会达到我们预期的效果,但是这里这个j是一个全局变量,全局变量会造成容易改变其值或者命名冲突等问题.

第二种办法的实现,我们再次引入闭包函数.因为闭包函数,每一次创建都会存在一个自己的空间来存储唯一的值.所以利用这个思维.我们把代码写成下面的代码.

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

我们将i的每一次执行for循环的值,传给不同创建的闭包函数,这样每一个闭包函数里存储的i值,就都不会一样.所以就是达到我们的想要的结果.

setTimeout使用闭包功能,实现定时打印数值的更多相关文章

  1. C# 创建Windows服务。服务功能:定时操作数据库 (转)

    C# 创建Windows服务.服务功能:定时操作数据库 一.创建window服务 1.新建项目-->选择Windows服务.默认生成文件包括Program.cs,Service1.cs 2.在S ...

  2. setTimeOut和闭包

    掘金上看到一个setTimeout与循环闭包的思考题.拿过来看了下,一方面了解settimeout的运行机制,还有就是js闭包的特性.关于闭包,有如下解释: 在这里写一点我对闭包的理解.理解闭包的关键 ...

  3. 附件1:setTimeout与闭包

    我在详细图解作用域链与闭包一文中的结尾留下了一个关于setTimeout与循环闭包的思考题. 利用闭包,修改下面的代码,让循环输出的结果依次为1, 2, 3, 4, 5 for (var i=1; i ...

  4. setTimeout 学习闭包

    @(技术笔记)[css] 学习参考网站 css 网站,可供参考 javascript学习网站 var create = function (i){ return function(){ console ...

  5. asp.net 实现在线打印功能,jQuery打印插件PrintArea实现自动分页

    使用的组件:jQuery打印插件PrintArea,有兴趣的可以研究一下. 使用方法略过,这里将介绍如何实现打印多页是可以分页. 现在提供两种方法思路: 1.根据特定的打印机型号和使用的纸张类型,然后 ...

  6. 当setTimeout遇到闭包

    1: function myTest(){ for(var i=0; i< 5; i++){ setTimeout(console.log(i), 0); } } myTest(); 或者比较正 ...

  7. setTimeout 与 闭包。。。

    先看下面一个比较坑的代码 for (var i=1; i<=5; i++) { setTimeout( function timer() { console.log(i); }, i*1000 ...

  8. 由一道面试题简单扩展 — setTimeout、闭包

    在一个前端公众号,看到这么一个号称简单的面试题: 1.以下程序输出什么? <script type="text/javascript"> function init() ...

  9. Java关于链表的增加、删除、获取长度、打印数值的实现

    package com.shb.java; public class Demo8 { public Node headNode = null; /** * @param args * @date 20 ...

随机推荐

  1. pod setup 安装的最新办法(大坑啊)

    由于升级到10.11以后安装cocodpods难免会碰到各种问题,下面有列举出不同的解决办法,建议一个方法如果不行,把文件请了再用第二种方法, 流程是这样的:正常安装-->碰到问题-->查 ...

  2. python的正则表达式

    1 元字符: 1.1 . .除了换行符以外的任何单个字符 1.2 ^ ^只匹配起始字符 temp1=re.findall('^morra','nsudi werwuirnmorra') temp2=r ...

  3. mysql免安装使用(win7 64位系统)

    一.解压 二.以管理员身份运行cmd 三.cmd命令进入到解压后的mysql文件bin目录下 四.将mysql服务添加到windows服务中.cmd在bin目录下输入:mysqld -install  ...

  4. Protocol Framework - SNMP Tutorial

    30.4 Protocol Framework TCP/IP network management protocols2 divide the management problem into two ...

  5. python基础2(数据类型、数据运算、for循环、while循环、列表)

    1.数据类型 python使用对象模型来存储数据,每一个数据类型都有一个内置的类,每新建一个数据,实际就是一个对象,即所有数据都是对象. 对象的3个特性: 身份:即内存地址,可以用id()来获取 类型 ...

  6. AE开发实现Spatial Join Analysis

    总体网上资料不多,包括esri帮助文档都写的很简单,没有各个string参数如match_option之类的可以输入的string限制,导致在摸索中gp.Execute时报错n回. 结合网上搜集资料及 ...

  7. linux集群时钟问题

    一.ntpd与ntpdate的区别: 摘自:ntpd与ntpdate的区别 - 百事乐 - 博客园  http://www.cnblogs.com/liuyou/archive/2012/07/29/ ...

  8. 探索ASP.NET MVC框架之控制器的查找与激活机制

    引言 前面一篇博文我们介绍了MVC框架的路由机制,我们知道一个URL请求如何从ASP.NET处理管线到达了IHttpHandler实例(MvcHandler).今天我们从MvcHandler来进行下一 ...

  9. golang笔记——map

    通过 new 创建的引用类型对象是不完整创建,比如 map,它仅分配了字典类型本身所需的内存(指针包装),而没有分配键值存储内存,也没有初始化散列桶等内部属性,因此无法工作,如下代码就是错误的: p ...

  10. javascript数据结构与算法---列表

    javascript数据结构与算法---列表 前言:在日常生活中,人们经常要使用列表,比如我们有时候要去购物时,为了购物时东西要买全,我们可以在去之前,列下要买的东西,这就要用的列表了,或者我们小时候 ...