javascript - 防止 fabric.js 调用的函数中的惰性求值

Question

这个答案对如何向特定对象而不是 Canvas 上的所有对象添加“链接”(实际上是重定向到 URL 的事件)提供了有用的解释:

How to add URL to an image in Fabric.js?

但是，当放置在生成多个对象的循环中时，它仅链接到最后创建的对象的值。

这是一个例子:

for (var p = 0; p<2; p++) {
  var object = new fabric.Circle({ radius: 10, top: 10 + 20 * p, left: 10 });
  object.on('selected', function() {
    window.location.href = "mylink" + "/" + p;
  })
  canvas.add(object);
}

这将使两个对象都链接到“mylink/1”，而我想要的是第一个对象链接到“mylink/0”，第二个对象链接到“mylink/1”。

我的 Javascript 技能停留在 1999 年，但这对我来说看起来像是一个延迟加载问题。如何强制从每个循环创建的对象具有自己的功能？

Answer 1

它似乎确实与惰性求值/闭包有关。

使用这个漂亮的答案 ( Javascript: Creating Functions in a For Loop )，我能够制定一个解决方案。发在这里希望对其他人有用。请参阅链接的答案以了解其工作原理。

  var fxnArr = [];
  for( var p = 0; p < rows.length; p++ ) {
    fxnArr[fxnArr.length] = (function(val) { return function(){  
        window.location.href = "mylink" + "/" + val; 
    } })(p);
  }
  for (var p = 0; p<2; p++) {
    var object = new fabric.Circle({ radius: 10, top: 10 + 20 * p, left: 10 });
    object.on('selected', fxnArr[p] );
    canvas.add(object);
  }