Я правильно вкладываю функцию?

Question

У меня мало сомнений, я позволил, скажем, 5 или более js функциям каждый вызов C# функции Через Ajax вызовы, выполняющие различные задачи, такие как (выборка данных из базы данных, проверка их, вычисления, сохранение их обратно в База данных et c).

Я вызываю функцию, используя Nested jQuery $.when(function1()).then(function2()) и так далее. Я хочу, чтобы первая функция полностью завершилась перед двумя и двумя перед третьей и так далее ... между этими функциями есть некоторая зависимость ...

Пример моего кода Как: (Мой подход)

$(document).ready(function () {
        $.when(one()).then(
            $.when(two()).then(
                $.when(three()).done(alert('three done')).then(
                    $.when(four()).then(
                        five()
                    ).done(alert('All Finished Up'))
                )
            )
        )
    });

    function one()       //eg List 1000 records from Db
    function two()      //Update Some 
    function three()   //validate Changes
    function four()   //save Changes
    function five()  // Some Other Task then

Теперь мой вопрос прост, я знаю, а не последовательно звонить, как

$(document).ready(function(){
    one();
    two();
    three();
    four();
    five();
    });

Я использовал выше шаблон вложения (Мой подход) ... Это хороший подход с точки зрения кодирования и производительности? Есть ли более эффективный подход, чем этот?

Answer 1

Кроме того, вы можете выполнять все эти вызовы параллельно, чтобы получить более быстрый возврат

function sleep(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

async function one(mode) {
  await sleep(1000);
  console.log(`${mode} : one() finished`);
}

async function two(mode) {
  await sleep(3000);
  console.log(`${mode} : two() finished`);
}

async function three(mode) {
  await sleep(3000);
  console.log(`${mode} : three() finished`);
}

async function four(mode) {
  await sleep(4000);
  console.log(`${mode} : four() finished`);
}

async function five(mode) {
  await sleep(5000);
  console.log(`${mode} : five() finished`);
}

async function runInSerial() {
  await one('serial');
  await two('serial');
  await three('serial');
  await four('serial');
  await five('serial');
}

async function runInParallel() {
  await Promise.all([
    one('parallel'),
    two('parallel'),
    three('parallel'),
    four('parallel'),
    five('parallel'),
  ]);
}

$(document).ready(function () {
  runInSerial().then(() => console.log('serial : all done!'));
  runInParallel().then(() => console.log('parallel : all done!'));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

Существует: если вы хотите поддерживать только те браузеры, которые поддерживают ES6, вы можете просто использовать синтаксис async / await, так как jQuery Promises в любом случае возвращает собственный Promise объект:

// Dummy async operation
function sleep(t) {
  return new Promise(resolve => setTimeout(resolve, t));  
}

$(document).ready(function() {
  run().then(() => console.log('all done'));
});

// Run all your async functions sequentially
async function run() {
  await one();
  console.log('one done');
  await two();
  console.log('two done');
}

async function one() {
  return sleep(500);
}
async function two() {
  return sleep(500);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>