Сократить повторение кода

Question

Описание

Есть у меня вот такая функция, которая создает эффект загрузки:

/**
 * @template T
 * @param {Promise<T>} promise 
 * @param {number} duration 
 * @param {number} delay 
 */
Window.prototype.load = async function (promise, duration = 200, delay = 0) {
    const dialogLoader = document.getElement(HTMLDialogElement, `dialog.loader`);
    dialogLoader.showModal();
    await dialogLoader.animate([
        { opacity: `0` },
        { opacity: `1` },
    ], { duration: duration, fill: `both` }).finished;
    try {
        const value = await promise;
        await dialogLoader.animate([
            { opacity: `1` },
            { opacity: `0` },
        ], { duration: duration, fill: `both`, delay: delay }).finished;
        dialogLoader.close();
        return value;
    } catch (error) {
        await dialogLoader.animate([
            { opacity: `1` },
            { opacity: `0` },
        ], { duration: duration, fill: `both`, delay: delay }).finished;
        dialogLoader.close();
        throw error;
    }
};

Немного смущает то, что и в try и в catch выполняется практически один и тот же код:

await dialogLoader.animate([
    { opacity: `1` },
    { opacity: `0` },
], { duration: duration, fill: `both`, delay: delay }).finished;
dialogLoader.close();

Вопрос

Как-то можно сократить этот повторяющийся код? И если да, то собственно как?

Answer 1

Получается так:

Window.prototype.load = async function (promise, duration = 200, delay = 0) {
  const dialogLoader = document.getElement(HTMLDialogElement, `dialog.loader`);
  dialogLoader.showModal();
    
  function animate(show) {
    return dialogLoader.animate(
      [{ opacity: +!show }, { opacity: +show }],
      { duration: duration, fill: `both`, delay: show ? 0 : delay }
    ).finished;
  }
  
  await animate(true);
  
  try {
    return await promise;
  } finally {
    await animate(false);
    dialogLoader.close();
  }
};

БЛОГ НА HUSL

Сократить повторение кода

Описание

Вопрос

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