How to delay part of a function?

Question

I would like to execute half of the a function and wait 1 second or 2 and then execute the rest, I tried like this, but I don't understand how to put a function inside another.

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');
      }

    });

Answer 1

If you want to accomplish this using await, you should to make the function asynchronous or it will throw a syntax error, await wont work using regular functions. Here is an example of how to accomplish what you're trying to do asynchronously.

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()

However, for this use case you might not need to accomplish this asynchronously. Using setTimeout() seems async, but it runs concurrently in the background and uses less memory - asynchronous functions break a synchronous flow, but they don't necessarily execute in a concurrent order. In your case, it might be best to use a callback function.

 /** 
  *  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)