Как я могу контролировать порядок выполнения тиковых методов между компонентами?

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>