Is it possible to hide transformation box by cycle?

Question

I'm trying to hide transformation box after 1 sec mouseout, but I can't get it to work.
Now it's throw an error:
TypeError: oLine_TR[l] is undefined.
If I replace oLine_TR[l] to oLine_TR[0] it's work fine.
Why it's happening?

var oGroupLineBox=[];
var oLine_TR=[];
var aLineGroupTimer=[];
 var oStage = new Konva.Stage({
    container: 'container',
    width: 800,
    height: 500,
  });

  var oLayer = new Konva.Layer();
  oStage.add(oLayer);

for(l=0; l<2; l++) {
//Boxes
oGroupLineBox[l] = new Konva.Group({
    draggable: true,
});
oLayer.add(oGroupLineBox[l]);

//Transformation
oLine_TR[l] = new Konva.Transformer({
   node: oGroupLineBox[l],
   visible: true,
   draggable: true,
});
oLayer.add(oLine_TR[l]);

  oGroupLineBox[l].on('click mouseover mousedown mouseup', function () {
    oLine_TR[l].show();
    oLayer.draw();
    clearTimeout(aLineGroupTimer[l]);
  });

  oGroupLineBox[l].on('mouseout', function () {
    aLineGroupTimer[l]=setTimeout(function() {
        oLine_TR[l].hide();
        oLayer.draw();
    }, 1000);
  });
}

score 1 · Answer 1 · answered Sep 23 '20 at 16:36

That is a common javascript issue related to variables declarations, async calls, and loops.

As the solution you may try to use let in the loop:

for(let l=0; l<2; l++) {
 // your code
}

For more info take a look here: setTimeout in for-loop does not print consecutive values

Is it possible to hide transformation box by cycle?

1 Answers1