Уборка некоторых нелепых JavaScript-кода

Question

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

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

• ss шкуры, затем
• pp шкуры, затем
• mm шкуры, затем
• дивы обновляется, то
• mm шоу, то
• pp показывает, затем
• ss шоу, затем

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

• ss шкуры, затем
• pp шкуры, затем
• дивы получить обновленные, затем
• pp показывает, то
• ss шоу, затем

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

• ss шкуры, затем
• дивы обновляется, то
• 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 является из-за все анимация.

Answer 1

Использование 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') 
    } 
})() 

асинхронной/ждут пока не поддерживается ни в одном браузере рядом с краем (и Chrome с флагом), так что вы должны использовать Babel для компиляции кода.