Очистка нелепого кода JavaScript

javascript jquery

163 просмотра

1 ответ

У меня есть немного JavaScript для трех HTML-дивы mm, ssи pp. Эти три поля анимированы друг с другом ... Если содержимое внешнего файла изменяется, эти поля обновляются на моей странице. Они обновляются с анимацией.

Если mmизменения, то:

  • ss прячет, то
  • pp прячет, то
  • mm прячет, то
  • div обновляются, затем
  • mm показывает, тогда
  • pp показывает, тогда
  • ss показывает, тогда

Если mmне меняется, но ppменяется, то:

  • ss прячет, то
  • pp прячет, то
  • div обновляются, затем
  • pp показывает, тогда
  • ss показывает, тогда

Если mmи ppне меняется, но ssменяется, то:

  • ss прячет, то
  • div обновляются, затем
  • ss показывает, тогда

У меня работает этот код, но он чрезвычайно громоздкий, и мне интересно, есть ли лучший способ сделать то, что я делаю:

if ($('#mm').html() != mm) {
    hideElem('.score');
    setTimeout(function() {
        hideElem('.player');
        setTimeout(function() {
            hideElem('.match');
            setTimeout(function() {
                updateElems();
                setTimeout(function() {
                    showElem('.match');
                    setTimeout(function() {
                        showElem('.player');
                        setTimeout(function() {
                            showElem('.score');
                        }, inSpeed);
                    }, inSpeed);
                }, outSpeed);
            }, outSpeed);
        }, outSpeed);
    }, outSpeed);
} else if ($('#pp').html() != pp) {
    hideElem('.score');
    setTimeout(function() {
        hideElem('.player');
        setTimeout(function() {
            updateElems();
            setTimeout(function() {
                showElem('.player');
                setTimeout(function() {
                    showElem('.score');
                }, inSpeed);
            }, outSpeed);
        }, outSpeed);
    }, outSpeed);
} else if ($('#ss').html() != ss) {
    hideElem('.score');
    setTimeout(function() {
        updateElems();
        setTimeout(function() {
            showElem('.score');
        }, outSpeed);
    }, outSpeed);
}

Причиной для setTimeouts являются все анимации.

Автор: Jason Axelrod Источник Размещён: 08.11.2019 11:13

Ответы (1)


5 плюса

Решение

Используйте Promises и async / await .

Ваш код может выглядеть так:

const wait = ms => new Promise(resolve => setTimeout(resolve, ms))

;(async () => {
  if ($('#mm').html() !== mm) {
    hideElem('.score')
    await wait(outSpeed)
    hideElem('.player')
    await wait(outSpeed)
    hideElem('.match')
    await wait(outSpeed)
    updateElems()
    await wait(outSpeed)
    showElem('.match')
    await wait(inSpeed)
    showElem('.player')
    await wait(inSpeed)
    showElem('.score')
  } else if ($('#pp').html() !== pp) {
    hideElem('.score')
    await wait(outSpeed)
    hideElem('.player')
    await wait(outSpeed)
    updateElems()
    await wait(outSpeed)
    showElem('.player')
    await wait(inSpeed)
    showElem('.score')
  } else if ($('#ss').html() !== ss) {
    hideElem('.score')
    await wait(outSpeed)
    updateElems()
    await wait(outSpeed)
    showElem('.score')
  }
})()

async / await еще не поддерживается ни в одном браузере, кроме Edge (и Chrome с флагом), поэтому вам нужно использовать Babel для компиляции кода.

Автор: Michał Perłakowski Размещён: 20.08.2016 11:23
Вопросы из категории :
32x32