for循环,定时器,闭包。

1,对于一个基本的for循环,顺序输出变量值。

        for(var i = 0; i < 4; i++){
            console.log(i);//结果不多说了吧
        }

2,如果for循环中有定时器,如下代码。

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

setTimeout 会延迟执行,那么执行到 console.log 的时候,其实 i 已经变成 5 了,开始输出一个 5(1000*0),然后每隔一秒再输出一个 5,一共 5 个 5。”

3,如果要得到每一秒输出i的正确结果,就要引入闭包来保存变量i不被销毁。

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

4,如果要实现,每隔3s输出一个数字,即,3s输出1,3s后再输出2...,就要对定时器时间设置

        for (var i = 0; i < 4; i++) {
            (function(a) {
                setTimeout(function() {
                    console.log(a);
                }, a*3000); //.....
            })(i)
        }

实际上,for循环很快,上述代码类似于同时启动3个定时器,只需要确保时间不一样即可。在此,时间分别是3s,6s,9s,由于同时启动,但是执行时间不同,各个时间间隔都是3s。巧妙地达到了目的。

案例4的实际用处如下:

  for (var i = 0; i < 1000; i++) {
    (function(a) {
      setTimeout(function() {
        console.log(a);
        $(‘#div1‘).removeClass().addClass(‘r‘+a);
        $(‘#div1‘).html(a);
      }, a*60);
    })(i)
  }

但是在数字大于5位数的时候,明显会有卡顿甚至引起浏览器奔溃。

时间: 2024-11-10 06:37:18

for循环,定时器,闭包。的相关文章

js settimeout定时 for循环问题 闭包

js settimeout定时 for循环问题 闭包先做个笔记 留待研究 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="jquery.1.7.2.min.js&q

深入理解闭包系列第四篇——常见的一个循环和闭包的错误详解

前面的话 关于常见的一个循环和闭包的错误,很多资料对此都有文字解释,但还是难以理解.本文将以执行环境图示的方式来对此进行更直观的解释,以及对此类需求进行推衍,得到更合适的解决办法 犯错 function foo(){ var arr = []; for(var i = 0; i < 2; i++){ arr[i] = function(){ return i; } } return arr; } var bar = foo(); console.log(bar[0]());//2 以上代码的运行

NSTimer单循环和多循环定时器讲解

本文将通过一个简单例子介绍一下NSTimer单循环和多循环定时器的使用方法. 创建一个Xcode工程,页面比较简单: 左侧部分实现了单循环定时器的创建.暂停.开启和停止功能,而右侧部分是多循环定时器的实现. 1.单循环定时器 定义定时器: NSTimer *singleCycleTimer; // 单循环定时器 功能实现: /* 创建单循环定时器 响应页面里"单循环"按钮 */ - (IBAction)createSingleCycleTimer:(id)sender { // 注:创

创建一个有上限的循环定时器

[代码质量差][英语质量差]见笑了 今天为了实现一个“取延时差异的资源并会提示超时”的功能时有一个地方想分享出来 /** * 创建有上限时钟 * @param {int} upperlimit 上限次数 * @param {int} cycle 间隔时间 * @param {Function} callback 回调函数 * @param {Function} completeCallback 执行完毕后调用的函数 * @return {Object} 返回一个时钟对象 */ function

一个循环和闭包的例子

1 for (var i=1; i<=5; i++) { 2 setTimeout(function timer() { 3 console.log(i); 4 }, i*1000); 5 } 预期:分别输出数字 1-5,每秒一次,每次一个. 实际上,会每秒一次输出 5次6,. 知识点: JS引擎是单线程的,定时器的工作方式:按指定时间间隔,将定时器的代码添加到JS引擎的消息队列:而非到了指定的时间立即执行回调函数. 在上例中, 作用域 尽管循环中的五个函数在各个迭代中分别定义,但都被封闭在一个

循环在闭包里的问题(写的不一定正确纯属阐述个人理解)

1 function box(){ 2 var arr=[]; 3 for(var i=0;i<5;i++){ 4 arr[i]=function(){ 5 return i; 6 } 7 } 8 return arr; 9 } 10 var cat=box(); 11 for(var i=0;i<5;i++){ 12 alert(cat[i]()); 13 } 看上面一段代码,总体看来alert(cat[i]());会分别输出0,1,2,3,4:其实不然,输出的全是5: 这时我们会产生疑问,

JavaScript作用域闭包(你不知道的JavaScript)

JavaScript闭包,是JS开发工程师必须深入了解的知识.3月份自己曾撰写博客<JavaScript闭包>,博客中只是简单阐述了闭包的工作过程和列举了几个示例,并没有去刨根问底,将其弄明白! 现在随着对JavaScript更深入的了解,也刚读完<你不知道的JavaScript(上卷)>这本书,所以乘机整理下,从底层和原理上去刨一下. JavaScript并不具有动态作用域,它只有词法作用域.词法作用域是在写代码或者说定义时确定的,而动态作用域是在运行时确定的.了解闭包前,首先我

《你不知道的JavaScript》 作用域闭包

一.什么是闭包 function foo() { var a = 2; //函数bar( )的词法作用域能访问函数foo( )的内部作用域.将bar( )函数当做值传递. //bar( )在foo( )内声明,它拥有涵盖foo( )内部作用域的闭包,使得该作用域能一直存活,供bar( ) 在之后任何时间引用.bar( )本身在使用foo( )的内部作用域,因此foo执行后不会被销毁. function bar(){ console.log( a ); } return bar; } //bar(

《你不知道的JavaScript》整理(一)——作用域、提升与闭包

最近在读一本进阶的JavaScript的书<你不知道的JavaScript(上卷)>,里面分析了很多基础性的概念. 可以更全面深入的理解JavaScript深层面的知识点. 一.函数作用域 1)函数作用域 就是作用域在一个“Function”里,属于这个函数的全部变量都可以在整个函数的范围内使用及复用. function foo(a) { var b = 2; function bar() { // ... } var c = 3; } bar(); // 失败 console.log( a,

JavaScript函数及闭包

前面一片文章讲到过一点函数,了解到每声明一个函数就会产生一个作用域.而外面的作用域访问不了里面的作用域(把里面的变量和函数隐藏起来),而里面的可以访问到外面的.对于隐藏变量和函数是一个非常有用的技术. 基于作用域隐藏的方法叫做最小授权或最小暴露原则. 这个原则是指在软件设计中,应该最小限度的暴露必要内容,而将其内容都隐藏起来,比如某个模块或对象得API设计.隐藏变量和函数可以解决同名标识符的之间的冲突,冲突会导致变量的意外覆盖. 例如: var a = 2; function foo(){ va