Lazy Evaluation in Funktion verhindert aufgerufen von Fabric.js

Question

Diese Antwort gibt eine hilfreiche Erklärung, wie Sie einen "Link" (wirklich, ein Ereignis, das zu einer URL umleitet) zu einem bestimmten Objekt und nicht zu allen Objekten auf der Leinwand hinzufügen :

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

wenn jedoch innerhalb einer Schleife angeordnet, die mehrere Objekte erzeugt, es nur zu dem letzten Objekt Wert erstellt.

Hier ist ein Beispiel:

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); 
} 

Dies wird beide Objekte haben die Verknüpfung zu „mylink/1“, wenn das, was ich will, ist für das erste Objekt verlinken auf „/ 0 MyLink“ und die zweite zu verbinden zu "mylink/1".

Meine Javascript-Fähigkeiten stecken im Jahr 1999, aber das sieht aus wie ein Problem bei der Lazy Loading. Wie erzwinge ich, dass das aus jeder Schleife erstellte Objekt eine eigene Funktion hat?

Answer 1

Es scheint über faule Bewertung/Schließungen zu sein.

Mit dieser schönen Antwort (Javascript: Creating Functions in a For Loop) konnte ich eine Lösung erstellen. Hier in den Hoffnungen zu schreiben, wird es für andere nützlich sein. Siehe die verknüpfte Antwort für warum es funktioniert.

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); 
    }