Блог

Я хотел бы выполнить половину функции a и подождать 1 секунду или 2, а затем выполнить остальное, я пробовал так, но я не понимаю, как поместить функцию внутри другой.

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

    $('#music_action').click(function() {

      if($(menu_start_animation).hasClass('menu_start_animation')) {
        $(menu_start_animation).removeClass('menu_start_animation');
        $(menu_start_animation).addClass('favorites_back_animation');
        await sleep(2000);
        $(menu_start_animation).removeClass('favorites_back_animation');
        $(menu_start_animation).addClass('music_animation');
      }

    });
  

Вам просто нужно выполнить свой click обратный вызов async .

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

$('#music_action').click(async function () {
    if ($(menu_start_animation).hasClass('menu_start_animation')) {
        $(menu_start_animation).removeClass('menu_start_animation');
        $(menu_start_animation).addClass('favorites_back_animation');

        await sleep(2000);

        $(menu_start_animation).removeClass('favorites_back_animation');
        $(menu_start_animation).addClass('music_animation');
    }
});
  

Если вы хотите выполнить это с помощью await, вам следует сделать функцию асинхронной, иначе она выдаст синтаксическую ошибку, await не будет работать с использованием обычных функций. Вот пример того, как выполнить то, что вы пытаетесь сделать асинхронно.

 sleep = async (ms) => {
  await new Promise((resolve, reject) => setTimeout(resolve, ms));
}

onClick = async () => {
  console.log('first task')

  // wait 2 seconds
  await sleep(2000);

  console.log('second task')
} 

onClick()
  

Однако для этого варианта использования вам может не потребоваться выполнять это асинхронно. Использование setTimeout() кажется асинхронным, но оно выполняется одновременно в фоновом режиме и использует меньше памяти — асинхронные функции нарушают синхронный поток, но они не обязательно выполняются в параллельном порядке. В вашем случае, возможно, лучше всего использовать функцию обратного вызова.

  /** 
  *  Basic example updating a string
  *  In your case, the callback function would be adding and removing whatever you 
  *  needed to in the second half of your function
  */
 let word = 'init'

 function sleep (callback, ms) {
   setTimeout( () => {
     word = 'updatedWord'
     callback()
   }, ms)
 }

 sleep(function () {
   alert(word)
 }, 2000)