- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
var funcs = [];
// let's create 3 functions
for (var i = 0; i < 3; i++) {
// and store them in funcs
funcs[i] = function() {
// each should log its value.
console.log("My value:", i);
};
}
for (var j = 0; j < 3; j++) {
// and now let's run each one to see
funcs[j]();
}
它输出:
My value: 3
My value: 3
My value: 3
而我希望它输出:
<小时/>My value: 0
My value: 1
My value: 2
当由于使用事件监听器导致函数运行延迟时,也会出现同样的问题:
var buttons = document.getElementsByTagName("button");
// let's create 3 functions
for (var i = 0; i < buttons.length; i++) {
// as event listeners
buttons[i].addEventListener("click", function() {
// each should log its value.
console.log("My value:", i);
});
}
<button>0</button>
<br />
<button>1</button>
<br />
<button>2</button>
...或异步代码,例如使用 promise :
// Some async wait function
const wait = (ms) => new Promise((resolve, reject) => setTimeout(resolve, ms));
for (var i = 0; i < 3; i++) {
// Log `i` as soon as each promise resolves.
wait(i * 100).then(() => console.log(i));
}
这在 for in
和 for of
循环中也很明显:
const arr = [1,2,3];
const fns = [];
for (var i in arr){
fns.push(() => console.log("index:", i));
}
for (var v of arr){
fns.push(() => console.log("value:", v));
}
for (const n of arr) {
var obj = { number: n }; // or new MyLibObject({ ... })
fns.push(() => console.log("n:", n, "|", "obj:", JSON.stringify(obj)));
}
for(var f of fns){
f();
}
这个基本问题的解决方案是什么?
最佳答案
问题是每个匿名函数中的变量 i
都绑定(bind)到函数外部的同一个变量。
let
ECMAScript 6 (ES6) 引入了新的 let
和 const
关键字,它们的作用域与基于 var
的变量不同。例如,在具有基于 let
的索引的循环中,循环中的每次迭代都会有一个具有循环范围的新变量 i
,因此您的代码将按您的预期工作。资源有很多,但我推荐2ality's block-scoping post作为一个重要的信息来源。
for (let i = 0; i < 3; i++) {
funcs[i] = function() {
console.log("My value: " + i);
};
}
但请注意,IE9-IE11 和 Edge 14 之前的 Edge 支持 let
,但会出现上述错误(它们不会每次都创建一个新的 i
,因此上面的所有函数都会记录 3,就像我们使用 var
一样)。 Edge 14 终于做对了。
随着 Array.prototype.forEach
函数的相对广泛使用(2015 年),值得注意的是,在主要涉及值数组迭代的情况下,.forEach( )
提供了一种干净、自然的方式来为每次迭代获得不同的闭包。也就是说,假设您有某种包含值(DOM 引用、对象等)的数组,并且出现了设置特定于每个元素的回调的问题,您可以这样做:
var someArray = [ /* whatever */ ];
// ...
someArray.forEach(function(arrayElement) {
// ... code code code for this one element
someAsynchronousFunction(arrayElement, function() {
arrayElement.doSomething();
});
});
这个想法是,与 .forEach
循环一起使用的回调函数的每次调用都将是它自己的闭包。传递给该处理程序的参数是特定于迭代的特定步骤的数组元素。如果它在异步回调中使用,它不会与迭代的其他步骤中建立的任何其他回调发生冲突。
如果您碰巧使用 jQuery,$.each()
函数可为您提供类似的功能。
您想要做的是将每个函数内的变量绑定(bind)到函数外部一个单独的、不变的值:
var funcs = [];
function createfunc(i) {
return function() {
console.log("My value: " + i);
};
}
for (var i = 0; i < 3; i++) {
funcs[i] = createfunc(i);
}
for (var j = 0; j < 3; j++) {
// and now let's run each one to see
funcs[j]();
}
由于 JavaScript 中没有 block 作用域 - 只有函数作用域 - 通过将函数创建包装在新函数中,您可以确保“i”的值保持您想要的样子。
关于循环内的 JavaScript 闭包 – 简单的实际示例,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39353790/
我有两个维度 DimFlag 和 DimPNL 以及一个事实表 FactAmount 。我正在寻找:当 pnl 是 stat(Is Stat=1) 时:sum (Actual x FlagId)对于
我想对包含其部分内容的文本字段执行简单搜索,但我不知道从哪里开始。我基本上想要人们对“包含搜索”的期望。如果我在 issue 中搜索 345 ,我会想要这个结果: 123456 234567 3456
我在 VBE 的 C# 插件中有这段代码(强调“VBE”:它不是 MS-Office 插件): public abstract class HostApplicationBase : IHostApp
我有一个 ImageView,它显示来自资源的图像。ImageView 的宽度是固定的 (60dp)。高度设置为 wrap_content。调整图像大小以适合此宽度(节省宽高比 - 这很完美) 问题是
我正在建立一个网站,但遇到了一个问题:谷歌浏览器开发者工具中的背景以较低/较高的分辨率延伸。当我直接从手机打开网站时,背景不适合屏幕,只是“剪切”了背景。 这是网站:https://feargames
好吧,首先,这是 HTML 模板: ... ... ... ... 如您所见,页面位于标题下方,并且通过 JS 代码可见
我读到了 BK-trees (Burkhard-Keller-Trees) 几个月前,据说这是一种保存您想通过距离度量再次读取的内容的好方法。因此,在每种情况下,您都希望通过相似性检索某些内容。 然而
在 python 中,很容易根据字符数用空格填充字符串。例如: print "aaa".ljust(10) + "end" print "www".ljust(10) + "end" 输出是: aaa
我的问题不是特定于编程语言的,而是更通用的问题,以了解人们的思维方式。 通常在大型开发公司中,每项工作都有特定的角色,例如程序员和架构师。因此架构师的观点是拥有完美的架构师和解决方案设计,另一方面程序
我想将数据传递给 then 方法,但是当我通过给它 this.passedResolve 来执行此操作时,它会得到 undefined function Promises(callback){
我希望使用 Erlang/Elixir 在金融市场创建一个平台即服务。我将在金融市场提供 AWS lambda 风格的函数,但我计划向客户分发我自己的基于 ARM 的硬件终端(基于 Nvidia Je
已结束。此问题正在寻求书籍、工具、软件库等的推荐。它不满足Stack Overflow guidelines 。目前不接受答案。 我们不允许提出寻求书籍、工具、软件库等推荐的问题。您可以编辑问题,以便
我已经看到很多代码,这些代码使用Runnable的循环时间来实现某些计时器/超时。问题是,如果有人决定更改此Runnable的循环时间,则计时器将不正确。 例: #define FOO_TIMER_1
当我将 WPF DataGrid 的 ColumnHeaderHeight 设置为 Auto (double.NaN) 时,如何获取列标题的实际呈现高度? 我似乎无法在 DataGrid 类中找到该属
目前最实用的png修复方法是什么?轻量级,支持背景重复和背景位置。 最佳答案 IE7.JS在我看来: IE7.js is a JavaScript library to make Microsoft
我已经进行了长时间的搜索并尝试了常见的嫌疑人,但现在是寻求帮助的时候了。 我的 Android Activity 非常愉快地从 SQLite 加载 EditText、Spinner 和 CheckBo
因此,我在 MySQL 全文中创建精确搜索时遇到了一些困难。 在我的数据库中,我正在尝试查找标题中包含特定关键字的职位。 所以我可以尝试 WHERE MATCH(jobTitle) AGAINST (
我正在尝试将 JavaScript 包含到一个表单应用程序中,该应用程序从现场收集施工数据。我已经用谷歌搜索了这个废话,但我无法弄清楚将 html 元素保存在数组中是否合法(或者我的语法是否正确)。
我知道有六种方法可以获取 session.save_path 指令的值(phpinfo()、session_save_path()等),但当值为空字符串时(默认情况下为空字符串),实际路径可以是多个位
我知道 npm 库在安装时可以在分层树中安装同一库的多个版本,如下所示: a@0.1.0 -> b@1.0 -> c@2.0 -> b@2.0 在上面,版本0.1.0的包a被拉入
我是一名优秀的程序员,十分优秀!