@sortfact333

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

Я хочу что бы у меня было удобная возможность выбрать что за чем идет в моем 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 Я не понял как его прявильно применять

console.log('Start load')
const loader = new GCodeLoader();
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 тоже самое что и await

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')
});

Как мне удобно и просто менять очередность выполнения кода?
  • Вопрос задан
  • 63 просмотра
Пригласить эксперта
Ответы на вопрос 2
@Karpion
Я ничего не понял. Похоже, Вы зачем-то пытаетесь асинхронно делать то, что нужно делать последовательно.
Ответ написан
Aetae
@Aetae
Тлен
Эти классы расширяют THREE.Loader, а у него есть метод loadAsync.
Т.е. в теории, всё, что тебе надо делать, это:
const loader_1 = new GCodeLoader();
const loader_2 = new AMFLoader();

let ask_1 = true;
let ask_2 = true;

async function main() {
  console.log('Start load')

  if (ask_1){
    const amfobject = await loader_1.loadAsync( './models/amf/rook.amf');
    scene.add( amfobject );
    console.log('on loader AMF', amfobject);
  }

  if (ask_2){
    const object = await loader_2.loadAsync( 'models/gcode/benchy.gcode');
    scene.add( object );
    console.log('on loader GCode', object);
  }

  console.log('END load')
}

main();

Сам не проверял, но по документации должно работать.)

P.S. Но вообще, если собираешься и дальше работать с js - тебе надо изучить асинхронность. То, что ты понаписал - откровенная чушь, показывающая, что ты в принципе не понимаешь, как оно работает. Просто открой учебник и перечитывай до просветления.
Там нет никакой магии, которая волшебным образом заставит твой код работать. Promise - это просто хитрая надстройка надо коллбэками(полностью реализуемая на обычном js), позволяющая развернуть их порядок назначения - не более. async-await - просто синтаксический сахар над Promise, делающий оные менее многословными, но не меняющий механизма.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы