Question

我使用fabric.js绘制二叉树/图形，我想引入一个延迟，以便绘图顺序可见。我在我的代码中使用了setTimeout方法，但问题是所有节点都在我不想要的同时被延迟和绘制。我想要一个节点，然后稍微延迟一个节点。请帮助我。

代码：

delaytime=5000;

function add(x){
   console.log(x);
   canvas.add(x);
}



function addRoot(value){

    var value=String(value);
    var x=new fabric.Circle({ radius: radius,left:width/2,fill:'red',top:radius,originX: 'center', originY: 'center',fill:'red'});
    var text= new fabric.Text(value, {fontSize: 10, originX: 'center', originY: 'center',left:width/2,top:radius});

    setTimeout(function(){ add(x);},delaytime);
  setTimeout(function(){ add(text);},delaytime);



    return x;
}

在上面的代码中，两个setTimeout调用正在同时执行，但我希望程序等到第一个setTimeout调用返回，即使它是5秒，然后执行下一个语句。请提示。

Async / await也无效。只有第一次调用绘制的是addRoot

的test.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test for fabric</title>

</head>
<body>

<canvas id="canvas" width="800" height="800" style="border:1px solid #000000">


</canvas>
<script src="fabric.js"></script>
    <script src="testfunctions.js">

    </script>
<script src="./testfunctions.js"></script>
<script>

    var canvas = new fabric.Canvas('canvas');
    var a10=addRoot(10);
    var a20=addNode(a10,20,225);
    var a40=addNode(a10,40,315);
    var a30=addNode(a20,30,270);

</script>

</body>
</html>

使用异步代码：

var canvas = new fabric.Canvas('canvas');
var height = parseInt(document.getElementById('canvas').getAttribute('height'));
var width = parseInt(document.getElementById('canvas').getAttribute('width'));
var distance = 200;
var radius = 20;
var linelimit = 180;
var delaytime = 1000;

 async function delay (time) {
  return new Promise(function (resolve) {
    setTimeout(resolve, time)
  })
}


async function addRoot (value) {
    var value = String(value);
    var x = new fabric.Circle({ radius: radius, left: width / 2, fill: 'red', top: radius, originX: 'center', originY: 'center', fill: 'red'});
    var text = new fabric.Text(value, {fontSize: 10, originX: 'center', originY: 'center', left: width / 2, top: radius});
    await delay(1000);
    canvas.add(x);
    canvas.add(text);
    return x
}

function addline (x1, y1, x2, y2) {
  console.log("In addline");
  var line = new fabric.Line([x1, y1, x2, y2], {stroke: 'black', originX: 'center', originY: 'center'});
  canvas.add(line)
}


 async function  addNode (node1, node2, angle) {
  var intialx = parseInt(node1.left);

  var initialy = parseInt(node1.top);

   console.log("addNode");

  if (angle > 0 && angle <= 90) {
    var pointx = Math.abs(Math.abs(Math.cos(angle * Math.PI / 180) * distance) + intialx);
    var pointy = Math.abs(Math.abs(Math.sin(angle * Math.PI / 180) * distance) - initialy);

    var initiallinex = Math.abs(Math.abs(Math.cos(angle * Math.PI / 180) * radius) + intialx);
    var initialliney = Math.abs(Math.abs(Math.sin(angle * Math.PI / 180) * radius) - initialy);
    var finallinex = Math.abs(Math.abs(Math.cos(angle * Math.PI / 180) * linelimit) + intialx);
    var finalliney = Math.abs(Math.abs(Math.sin(angle * Math.PI / 180) * linelimit) - initialy)
  }
  if (angle > 90 && angle <= 180) {
    var pointx = Math.abs(Math.cos(angle * Math.PI / 180) * distance + intialx);
    var pointy = Math.abs(Math.sin(angle * Math.PI / 180) * distance - initialy);

    var initiallinex = Math.abs(Math.cos(angle * Math.PI / 180) * radius + intialx);
    var initialliney = Math.abs(Math.sin(angle * Math.PI / 180) * radius - initialy);
    var finallinex = Math.abs(Math.cos(angle * Math.PI / 180) * linelimit + intialx);
    var finalliney = Math.abs(Math.sin(angle * Math.PI / 180) * linelimit - initialy)
  }
  if (angle > 180 && angle <= 270) {
    if (angle == 270) {
      var pointx = Math.abs(Math.cos(angle * Math.PI / 180) * distance + intialx);
      var pointy = Math.abs(Math.sin(angle * Math.PI / 180) * distance - initialy);
      var initiallinex = Math.abs(Math.cos(angle * Math.PI / 180) * radius + intialx);
      var initialliney = Math.abs(Math.sin(angle * Math.PI / 180) * radius - initialy);
      var finallinex = Math.abs(Math.cos(angle * Math.PI / 180) * linelimit + intialx);
      var finalliney = Math.abs(Math.sin(angle * Math.PI / 180) * linelimit - initialy)
    } else {
      var pointx = Math.abs(Math.cos(angle * Math.PI / 180) * distance + intialx);
      var pointy = Math.abs(Math.sin(angle * Math.PI / 180) * distance - initialy);
      var initiallinex = Math.abs(Math.cos(angle * Math.PI / 180) * radius + intialx);
      var initialliney = Math.abs(Math.sin(angle * Math.PI / 180) * radius - initialy);
      var finallinex = Math.abs(Math.cos(angle * Math.PI / 180) * linelimit + intialx);
      var finalliney = Math.abs(Math.sin(angle * Math.PI / 180) * linelimit - initialy)
    }
  } else {
    var pointx = Math.abs(Math.cos(angle * Math.PI / 180) * distance + intialx);
    var pointy = Math.abs(Math.sin(angle * Math.PI / 180) * distance - initialy);
    var initiallinex = Math.abs(Math.cos(angle * Math.PI / 180) * radius + intialx);
    var initialliney = Math.abs(Math.sin(angle * Math.PI / 180) * radius - initialy);
    var finallinex = Math.abs(Math.cos(angle * Math.PI / 180) * linelimit + intialx);
    var finalliney = Math.abs(Math.sin(angle * Math.PI / 180) * linelimit - initialy)
  }

  var x = new fabric.Circle({ radius: radius, originX: 'center', originY: 'center', fill: 'red', left: pointx, top: pointy});
  var value1 = String(node2);
  var text = new fabric.Text(value1, {fontSize: 10, originX: 'center', originY: 'center', left: pointx, top: pointy});
  await delay(1000);
  canvas.add(x);
  canvas.add(text);
  await delay(1000);
  console.log("Executed");
  addline(initiallinex, initialliney, finallinex, finalliney);
  return x;
}

Answer 1

您可以使用ES2017 async / await：

＆＃13;

function delay (time) {
  return new Promise(function (resolve) {
    setTimeout(resolve, time)
  })
}

let delaytime = 1000

async function addRoot (value) {
  console.log('do stuff')
  // var value=String(value);
  // var x=new fabric.Circle({ radius: radius,left:width/2,fill:'red',top:radius,originX: 'center', originY: 'center',fill:'red'});
  // var text= new fabric.Text(value, {fontSize: 10, originX: 'center', originY: 'center',left:width/2,top:radius});
  await delay(delaytime)
  console.log('add x')
  // add(x);
  await delay(delaytime)
  console.log('add text')
  // add(text);
  return { value: value }
  // return x;
}

// usage
addRoot('some value').then(function (returnedValue) {
  console.log(returnedValue)
})

＆＃13;

注意演示中每个console.log()输出旁边的时间戳延迟。

更新

为了正确使用此代码而对您的代码进行最小的更改，请更改以下代码段：

var canvas = new fabric.Canvas('canvas');
var a10=addRoot(10);
var a20=addNode(a10,20,225);
var a40=addNode(a10,40,315);
var a30=addNode(a20,30,270);

到此：

// to support await operator
(async function () {
  // do not declare another canvas, you've already done so in other block
  var a10 = await addRoot(10)
  var a20 = await addNode(a10, 20, 225)
  var a40 = await addNode(a10, 40, 315)
  var a30 = await addNode(a20, 30, 270)
})()

Answer 2

有两种方法可以实现您想要的目标

（1）在最后delaytime

添加额外的setTimeout

setTimeout(function() {

  add(x);
}, delaytime);

setTimeout(function() {

  add(text);
}, delaytime * 2);

（2）将最后一个setTimeout放在第一个setTimeout

中

setTimeout(function() {

  add(x);
  setTimeout(function() {

    add(text);
  }, delaytime);
}, delaytime);

停止从javascript函数返回，直到SetTimeout执行

2 个答案:

更新