Question

我使用Icon.Canvas在传单地图上用画布绘制标记。我有问题，我假设与＃34;关闭循环＆＃34;然而我似乎无法使用任何其他解决方案，因为创建普通画布和它的上下文以及我正在做的事情（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

Answer 1

您可以使用IIFE返回包含当前逻辑的函数，因此当时的值不会受循环影响。

编辑：当您进入ES2015时，您可以使用let / const代替var来使用当前代码实现block-scoped而不是function-scoped。

如果可以使用lib Underscore.each也可以开展工作，如果没有，你仍然可以使用Object.keys()获取密钥Array，然后使用.forEach循环通过它，所有这些方法都可以防止循环变化中的循环变化获得的值。

失败演示和IIFE修复：

＆＃13;

'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.
}

＆＃13;

使用forEach进行演示：

＆＃13;

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.
}

＆＃13;

使用let ES2015进行演示（这需要一些非常现代的broswer版本才能使代码段工作），但是那些能够将ES2015语法编译为ES5以进行大多数工作的转发器浏览器（例如：babel）：

＆＃13;

'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.
}

＆＃13;

所以你可以对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);

Canvas只在地图上绘制循环的最后一个元素

1 个答案: