如何延迟功能的一部分？

Question

我想执行一个函数的一半，等待 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');
      }

    });

Answer 1

您只需进行 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');
    }
});

Answer 2

如果您想使用 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)

如何延迟功能的一部分？

How to delay part of a function?

javascript

function

delay

wait

pause