我正在使用Icon.Canvas在传单地图上用画布绘制标记。我遇到了一些问题,我认为这与“关闭循环”有关,但是由于创建普通画布及其上下文和我在做什么,我似乎无法使用任何其他解决方案(canvas元素和ctx由Icon.Canvas库创建)。
for (var park in parksMap) {
var circle = new L.Icon.Canvas({
iconSize: new L.Point(50, 50)
});
var item = parksMap[park];
var total = item.kpis.availability.online + item.kpis.availability.offline + item.kpis.availability.noComm;
var greenSize = item.kpis.availability.online * 2 / total;
var redSize = item.kpis.availability.offline * 2 / total;
console.log('OUTSIDE');
console.log(item);
circle.draw = function (ctx, w, h) {
console.log('INSIDE');
console.log(item);
setUpParkForStatus(item, ctx, greenSize, redSize);
parkWindConstructor(ctx);
ctxArray.push({
id: item.id,
ctx: ctx
});
} ...
(code continues on to create the actual markers)
}
setUpParksStatus是在图纸中具有实际代码的函数。以下是console.logs的结果,以使您更好地理解:
OUTSIDE
park1
OUTSIDE
park2
INSIDE
park2
INSIDE
park2
最佳答案
您可以使用IIFE
返回包含当前逻辑的函数,因此此时的值不会受到循环的影响。
编辑:进入ES2015
时,可以使用let / const而不是var
来实现当前代码,将其作为block-scoped
而不是function-scoped
。
如果可以使用libs Underscore.each也可以完成工作,如果不能使用,则仍然可以使用Object.keys()获取键为Array
,然后使用.forEach
遍历它,所有这些方法都可以防止值随着循环前进获得循环变化。
失败演示和IIFE修复:
'use strict';
var obj = {
'a': 1,
'b': 2,
'c': 3
};
var funcArr1 = [];
var funcArr2 = [];
var k, func1, func2;
for (k in obj) {
// Way 1, all point to last.
func1 = function() {
console.log(k, obj[k]);
};
// Snapshot it
// The wrap function will be called imediately, and it'll return the function similar to func1
// But the outer function creates a scope, which stores the k(and rename it to v to avoid ambiguous)
// So all the func2s will point to each key in obj instead of last.
func2 = (function(v) {
return function() {
console.log(v, obj[v]);
};
})(k);
funcArr1.push(func1);
funcArr2.push(func2);
}
// IN ES2015, you can use let to achieve:
var funcArr3 = [];
var func3;
// The let, unlike var, is block scoped, so it can achieve what you expect in simpler form.
for (let m in obj) {
func3 = function() {
console.log(m, obj[m])
};
funcArr3.push(func3);
}
// To loop object with .forEach, which works on array.
var funcArr4 = [];
Object.keys(obj).forEach(function(key, index) {
funcArr4.push(function() {
console.log(key, obj[key]);
});
});
var i, length = funcArr1.length;
for (i = 0; i < length; ++i) {
console.log('Way1');
funcArr1[i](); // All of it will log c, 3, as k is pointing to c when exit the loop.
console.log('Way2');
funcArr2[i]() // Because we use a function to keep k, it'll log what we expect.
console.log('Way ES2015');
funcArr3[i](); // Because we use a function to keep k, it'll log what we expect.
console.log('Way forEach');
funcArr4[i](); // Because we use a function to keep k, it'll log what we expect.
}
forEach
演示:var obj = {
'a': 1,
'b': 2,
'c': 3
};
var funcArr = [];
Object.keys(obj).forEach(function(key, index) {
funcArr.push(function() {
console.log(key, obj[key]);
});
});
var i, length = funcArr.length;
for (i = 0; i < length; ++i) {
console.log('Way forEach');
funcArr[i](); // Because we use a function to keep k, it'll log what we expect.
}
具有
let
的ES2015
的演示(此代码段需要一些非常现代的浏览器版本才能工作),但是有些编译器能够将ES2015语法编译为ES5,以在大多数浏览器上运行(例如:babel):'use strict'; // This make chrome to accept some ES2015 syntax
const obj = {
'a': 1,
'b': 2,
'c': 3
};
// IN ES2015, you can use let to achieve:
let funcArr = [];
// The let, unlike var, is block scoped, so it can achieve what you expect in simpler form.
for (let m in obj) {
funcArr.push(function() {
console.log(m, obj[m])
});
}
for (let i = 0, len = funcArr.length; i < len; ++i) {
console.log('Way ES2015');
funcArr[i](); // Because we use a function to keep k, it'll log what we expect.
}
因此,您可以对
circle.draw
做类似的事情:// Now the current value that may be used by the callback won't change as loop advanced.
circle.draw = (function(item, total, greenSize, redSize) {
return function (ctx, w, h) {
console.log('INSIDE');
console.log(item);
setUpParkForStatus(item, ctx, greenSize, redSize);
parkWindConstructor(ctx);
ctxArray.push({
id: item.id,
ctx: ctx
});
};
})(item, total, greenSize, redSize);