Как асинхронный код сделать пошаговым?

Question

Я хочу что бы у меня было удобная возможность выбрать что за чем идет в моем three.js коде

const loader_1 = new GCodeLoader();
const loader_2 = new AMFLoader();

let ask_1 = true;
let ask_2 = true;

function loadloader_1(){
  loader_1.load( './models/amf/rook.amf', function ( amfobject ) {
    scene.add( amfobject );
    console.log('on loader GCode')
  }, onProgress , onError);
  console.log('off loader GCode')
}
function loadloader_2(){
  loader_2.load( 'models/gcode/benchy.gcode', function ( object ) {
    //object.position.set( - 100, - 20, 100 );
    scene.add( object );
    console.log('on loader AMF')
  }, onProgress , onError);
  console.log('off loader AMF')
}


console.log('Start load')
if (ask_1){
  console.log('Start load 1')
  loadloader_1()
  console.log('END  load 1')
}
if (ask_2){
  console.log('Start load 2')
  loadloader_2()
  console.log('END  load 2')
}
console.log('END load')

callback не подходит так как он ужасно выглядит и когда очередности слишком много то он становится нечитабельным

const loader_1 = new GCodeLoader();
const loader_2 = new AMFLoader();

let ask_1 = true;
let ask_2 = true;

console.log('Start load')



loader_1.load( '/models/amf/rook.amf', function ( model1 ) {
  if (ask_1){
    scene.add( model1 );
  }
  console.log('End load for model 1 ')
  if (ask_2){
    loader_2.load( 'models/gcode/benchy.gcode', function ( model2 ) {
      model2 .position.set( - 100, - 20, 100 );
      scene.add( model2 );
      console.log('End load for model 2 ')
    }, onProgress , onError);
  }
}, onProgress , onError);

console.log('END load')

await и Promise я не понял как их использовать для three.js Я читал документацию и все равно не понял как это сделать

await

console.log('Start load')
const loader = new GCodeLoader();
console.log('load')
await loader.load( 'models/gcode/benchy.gcode', function ( object ) {
  object.position.set( - 100, - 20, 100 );
  scene.add( object );
}, onProgress , onError);
let result = await loader;
console.log('End load for mode l ')

Promise

const loader_1 = new GCodeLoader();
const loader_2 = new AMFLoader();

let ask_1 = true;
let ask_2 = true;

function loadloader_1(text) {
  if (ask_1){
    const loader = new AMFLoader();
    loader_1.load( './models/amf/rook.amf', function ( amfobject ) {
      scene.add( amfobject );
      console.log('on loader GCode' + text)
    }, onProgress , onError);
    console.log('off loader GCode' + text)
  }
}
function loadloader_2(text) {
  if (ask_2){
    loader_2.load( 'models/gcode/benchy.gcode', function ( object ) {
      //object.position.set( - 100, - 20, 100 );
      scene.add( object );
      console.log('on loader AMF' + text)
    }, onProgress , onError);
    console.log('off loader AMF' + text)
  }
}

function loadScript(src) {
  return new Promise(function(resolve, reject) {
    let script = loadloader_1(src);
  });
}

loadScript("model 1")
  .then(function(script) {
    return loadScript("model 2");
  })
  .then(function(script) {
    return loadScript("model 3");
  })
  .then(function(script) {
    console.log('END')
});

Я знаю что асинхронный означает то что код выполняется одновременно.
Но я так и не понял как мне приостоновить выполнения кода ниже до тех пор пока прошлая модель не будет загружена.

Answer 1

callback не подходит так как он ужасно выглядит и когда очередности слишком много то он становится нечитабельным

С callback тоже можно играться и что-то придумать. Нигде не написано, что используя колбеки, обязательно нужно плодить вложенности)

function loader_1_load(done) {
  // loader_1.load( './models/amf/rook.amf',  
  setTimeout(function() {
    console.log('on loader GCode');
    done(); // должен вызываться и в случае error.
  }, 3000);
}

function loader_2_load(done) {
  // loader_2.load( 'models/gcode/benchy.gcode',
  setTimeout(function() {
    console.log('on loader AMF');
    done();
  }, 3000);
}

/***/
const LOADER = {
  data: [
    // Можно вынести массив куда-нибудь в другое место / файл,
    // или добавить метод LOADER.add(), если так будет удобнее.
    // Функции before / after не обязательны.
    
    {
      before: () => console.log('Start load 1'),
      loader: loader_1_load,
      after: () => console.log('END load 1'),
    },
    {
      off: true, // off заставит пропустить этот объект.
      before: () => console.log('Start load 5'),
      loader: loader_1_load,
      after: () => console.log('END load 5'),
    },
    {
      before: () => console.log('Start load 2'),
      loader: loader_2_load,
      after: () => console.log('END load 2'),
    },
  ],
  
  start: function() {    
    console.log('Start load');
    this.next();
  },

  _i: 0,
  next: function() {
    let obj = this.data[this._i++];
    
    if (!obj) {    
      console.log('END load');
      this._i = 0;
      return;
    }
    
    if (obj.off) {
      this.next();
      return;
    }
    
    /***/
    obj.before && obj.before();
    
    const done = () => {
      obj.after && obj.after();
      this.next();
    };
    
    obj.loader(done);
  }
};

LOADER.start();

БЛОГ НА HUSL

Как асинхронный код сделать пошаговым?

Ответы (1 шт):