关于var在for循环遇到的问题解决

前言

var是ES5定义变量的一种声明方式，一直听说var声明变量，存在循环变量泄漏为全局变量问题，但总是想不明白这个“全局”有什么影响，还有，到底什么时候输出的结果是递增/减的值，什么时候输出一样的值，也不清楚。

问题复现

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

预期效果：12345

打印结果：66666

解决方式

闭包

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

setTimeout 第三参数

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

使用 let 定义 i

for (let i = 1; i <= 5; i++) {
    setTimeout(function timer() {
        console.log(i)
    }, i * 1000)
}

let

关于let，记住：当前的i只在本轮循环有效，每一次循环的i其实都是一个新的变量。

JavaScript 引擎内部会记住上一轮循环的值，初始化本轮的变量i时，就在上一轮循环的基础上进行计算。

另外，for循环还有一个特别之处，就是设置循环变量的那部分是一个父作用域，而循环体内部是一个单独的子作用域。

for (let i = 0; i < 3; i++) {
let i = 'abc';
console.log(i);
}
// abc
// abc
// abc

总结

到此这篇关于var使用for循环遇到的问题解决的文章就介绍到这了,更多相关var for循环问题内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • jQuery中的for循环var与let的区别

    今天在写jQuery请求接口中发现一个问题: 在用AJAX发送请求中又嵌套了一个AJAX请求,发现在内层请求的success中对第一次success中的循环变量 i 无法获取,具体代码如下: $.ajax({ type: "get", url: "//////////////////////////", success: function (result) { rs = JSON.parse(result).data; for (var i = 0; i <

  • js for循环，为什么一定要加var定义i变量

    譬如下面. 复制代码 代码如下: for(i=0;i<10;i++){//就不写成: var i=0 alert(i); } 但是,这真的不是个好习惯,下面我就说说为什么写Js的for循环一定要加var,否则会时不时给你带来烦人难查的bug. 譬如现在我们要实现这样的功能:输出 10 20 30 40 50 60 70 80 90 100 通过下面code实现,WriteNumber从1到10循环,每次循环调用TenTimes方法返回10倍的索引值. 复制代码 代码如下: <script ty

  • es6 for循环中let和var区别详解

    let和var区别: for(var i=0;i<5;i++){ setTimeout(()=>{ console.log(i);//5个5 },100) } console.log(i);//5 console.log('=============') for(let j=0;j<5;j++){ setTimeout(()=>{ console.log(j);//0,1,2,3,4 },100) } console.log(j);//报错 j is not defined 为什么

  • 关于var在for循环遇到的问题解决

    前言 var是ES5定义变量的一种声明方式,一直听说var声明变量,存在循环变量泄漏为全局变量问题,但总是想不明白这个"全局"有什么影响,还有,到底什么时候输出的结果是递增/减的值,什么时候输出一样的值,也不清楚. 问题复现 for (var i = 1; i <= 5; i++) { setTimeout(function timer() { console.log(i) }, i * 1000) } 预期效果:12345 打印结果:66666 解决方式 闭包 for (var

  • shell脚本编程之循环语句学习笔记

    本篇博客很简单,看一下shell编程使用到的循环语句,包括for循环,while循环,until循环,for后边跟一个变量,然后是一个集合,将集合中的东西赋给这个变量,每次循环执行,这跟java中的foreach很像,while循环和if使用同样的条件判断,满足条件执行语句,until和while相反,不满足条件执行语句,是不是很简单啊,下面看一下代码吧. 复制代码 代码如下: #!/bin/sh #for循环最基本的用法 for var in "hello" "xiao t

  • 浅谈shell数组的定义及循环

    shell中数组的定义及遍历,先直接看示例: #!/bin/sh #定义方法一 数组定义为空格分割 arrayWen=(a b c d e f) #定义方法二 arrayXue[0]="m" arrayXue[1]="n" arrayXue[2]="o" arrayXue[3]="p" arrayXue[4]="q" arrayXue[5]="r" #打印数组长度 echo ${#arr

  • JavaScript中var let const的用法有哪些区别

    目录 1.重复声明 1.1 var 1.2 let 1.3 const 2.变量提升 2.1 var 2.2 let 2.3 const 3.暂时性死区 3.1 var 3.2 let 3.3 conset 4. window对象的属性和方法 5.块级作用域 1.重复声明 var支持重复声明,let.const不支持重复声明. 1.1 var var a = 1; var a = 2; console.log(a); 输出结果: 2 1.2 let let b = 3; let b = 4; c

  • Spring Bean创建和循环依赖

    Spring Bean创建和循环依赖

    目录 1 前言 2 Bean 的创建 createBeanInstance populateBean initializeBean 循环依赖问题 总结 1 前言 前文已经讲述了Spring BeanFactory 与 FactoryBean 的区别详情,在本文中将继续讲解 Bean 的创建和初始化,在这个环节中将会涉及到 Bean 的创建.初始化和循环依赖内容. 2 Bean 的创建 在前文中已经讲述了 Spring 容器启动的核心方法 refresh,关于 Bean 的创建和初始化方法都是在 

  • bat命令入门与高级技巧详解

    目录 第一章 批处理基础 第一节 常用批处理内部命令简介 1.REM 和 :: 2.ECHO 和 @ 3.PAUSE 4.ERRORLEVEL 5.TITLE 6.COLOR 7.mode 配置系统设备 8.GOTO 和 : 9.FIND 10.START 11.assoc 和 ftype 12.pushd 和 popd 13.CALL 14.shift 15.IF 16.setlocal 与 变量延迟(ENABLEDELAYEDEXPANSION / DISABLEDELAYEDEXPANSI

  • 原生js和jQuery实现淡入淡出轮播效果

    本文实例为大家介绍了基于jQuery实现淡入淡出轮播效果的关键代码,分享给大家供大家参考,具体内容如下: 基本原理:将所有图片绝对定位在同一位置,透明度设为0,然后通过jQuery的淡入淡出实现图片的切换效果. html代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>一个轮播&l

  • seajs1.3.0源码解析之module依赖有序加载

    这里是seajs loader的核心部分,有些IE兼容的部分还不是很明白,主要是理解各个模块如何依赖有序加载,以及CMD规范. 代码有点长,需要耐心看: 复制代码 代码如下: /** * The core of loader */ ;(function(seajs, util, config) { // 模块缓存 var cachedModules = {} // 接口修改缓存 var cachedModifiers = {} // 编译队列 var compileStack = [] // 模

  • javascript写的异步加载js文件函数(支持数组传参)

    自己用的加载js文件,支持多文件,不兼容ie 复制代码 代码如下: /** * 加载js文件 * @param  {string || array}   url   js路径 * @param  {Function} fn      加载完成后回调 * @return {object}           game对象 * @example * getScript("url.js",fn) * getScript(["url-1.js","url-2.js

  • DOS批处理高级教程 第七章 DOS批处理编程高级技巧

    一.交互界面设计 没啥说的,看看高手设计的菜单界面吧: @echo off cls title 终极多功能修复 :menu cls color 0A echo. echo ============================== echo 请选择要进行的操作,然后按回车 echo ============================== echo. echo 1.网络修复及上网相关设置,修复IE,自定义屏蔽网站 echo. echo 2.病毒专杀工具,端口关闭工具,关闭自动播放 echo

随机推荐