aframe - 如何控制跨组件执行的刻度方法的顺序？

Question

我有多个定义tick方法的组件，我需要控制执行顺序。具有以下组件：

AFRAME.registerComponent('component-a', {    
  tick: function () { console.log('ComponentA'); }
});

AFRAME.registerComponent('component-b', {    
  tick: function () { console.log('ComponentB'); }
});

AFRAME.registerComponent('component-c', {    
  tick: function () { console.log('ComponentC'); }
});

以及以下实体：

<a-entity component-a component-b component-c></a-entity> 

我想保证下面的滴答顺序：component-a, component-b, component-c

Answer 1

A-Frame 没有内置方式来定义分时执行顺序。刻度将按照组件初始化的顺序执行。manager component可以通过按所需顺序调用组件方法来轻松控制执行：

AFRAME.registerComponent('manager', {    
  tick: function () {
    const el = this.el;
    el.components['component-a'].print();
    el.components['component-b'].print();
    el.components['component-c'].print();
  }
});

AFRAME.registerComponent('component-a', {    
  print: function () { console.log('ComponentA'); }
});

AFRAME.registerComponent('component-b', {    
  print: function () { console.log('ComponentB'); }
});

AFRAME.registerComponent('component-c', {    
  print: function () { console.log('ComponentC'); }
});

在以下实体上：

<a-entity manager component-a component-b component-c>