如何解决Cytoscape集合动画完成后回调函数多次触发的问题

问题原因 #

你为集合批量绑定动画时，库会为集合内的每个独立元素单独创建动画实例，每个实例播放结束都会触发一次complete回调，因此触发次数和集合元素数量一致。

解决方法 #

方法1：计数器实现（对JS新手最友好） #

声明一个计数器记录已经完成动画的元素数量，每次触发回调时计数+1，当计数等于集合总长度时再执行你需要的逻辑：

const total = collection.length;
let completedCount = 0;

collection.animate({
  style: {
    'line-color': 'red',
    'target-arrow-color': 'red',
    'border-width': 20,
    'border-color': 'red'
  }
}, {
  'duration': 3000,
  'complete': () => {
    completedCount++;
    // 所有元素动画都完成时才执行目标逻辑
    if (completedCount === total) {
      console.log("hello world");
      // 此处添加你需要执行的回调逻辑
    }
  }
});

方法2：Promise批量等待（更符合现代JS写法） #

把每个元素的动画包装成Promise，再用Promise.all等待所有Promise执行完成后触发回调：

// 为每个元素创建动画Promise
const animationPromises = collection.map(ele => {
  return new Promise(resolve => {
    ele.animate({
      style: {
        'line-color': 'red',
        'target-arrow-color': 'red',
        'border-width': 20,
        'border-color': 'red'
      }
    }, {
      duration: 3000,
      complete: resolve
    });
  });
});

// 所有动画完成后统一执行回调
Promise.all(animationPromises).then(() => {
  console.log("hello world");
  // 此处添加你需要执行的回调逻辑
});

如果你使用的是Cytoscape.js库，还可以直接创建集合的组合动画，更简便地实现单次回调：

const ani = collection.animation({
  style: {
    'line-color': 'red',
    'target-arrow-color': 'red',
    'border-width': 20,
    'border-color': 'red'
  },
  duration: 3000
});
ani.play().promise().then(() => {
  console.log("hello world");
});

内容的提问来源于stack exchange，提问作者user21398