如何使用不同的參數對 function 的調用進行排隊，並在上一次調用完成后每次調用運行 function

Question

我有 function slideUp() ，它通過單擊按鈕調用，單擊事件調用另一個異步 function removeSlideUp() 返回 promise。但是多次單擊按鈕立即調用 removeSlideUp()，我希望所有點擊都可以查詢和僅在“transitionend”事件完成后才依次調用 removeSlideup()。 我是 javascript 的新手，不知道我被困在哪里

這是我的代碼

async function slideUp() {
  await removeSlideUp();
}

function removeSlideUp() {
  return new Promise(function (resolve, reject) {
    //console.log(smartAlert.classList.contains("slideup"));
    if (smartAlert.classList.contains("slideup") === false) {
      smartAlert.classList.add("slideup");
      smartAlert.addEventListener(
        "transitionend",
        function () {
          console.log("completed");
          smartAlert.classList.remove("slideup");
          resolve();
        },
        { once: true }
      );
    } else {
      smartAlert.classList.remove("slideup");
      resolve();
    }
  });
}

$('button[name="btn_show"]').click(function () {
  slideUp();
});

注意：它需要在純 javascript 沒有 jquery 或其他框架中完成，當調用 removeSlideUp 時，我無法逐一執行，它確實產生了預期的結果

以下代碼允許正確地從 transitionend 事件中獲得承諾。 代碼 promise 返回代碼取自使用 EventListener 解析 promise來自@Volune 的第二種回答方法

//lets start playing
const buttonShow = document.getElementById("btn_show");
buttonShow.addEventListener("click", async () => {
  let result;
  switch (smartAlert.classList.contains("slideup")) {
    case true:
      smartAlert.classList.remove("slideup"); //this line triger the transition to happen
      result = await transitoinEnd("Show alert is complete");
      console.log(result);
      break;

    default:
      smartAlert.classList.add("slideup");
      result = await transitoinEnd("Hide alert is complete");
      console.log(result);
      setTimeout(() => {
        smartAlert.classList.remove("slideup");
      }, 1000);
      result = await transitoinEnd("Show alert is complete");
      console.log(result);
  }
});

const buttonHide = document.getElementById("btn_hide");
buttonHide.addEventListener("click", async () => {
  smartAlert.classList.add("slideup"); //this line triger the transition to happen
  const result = await transitoinEnd("Hide alert is complete");
  console.log(result);
});

const smartAlert = document.getElementById("smart-alert");
const transitoinEnd = (message) => {
  return new Promise((resolve) => {
    smartAlert.addEventListener(
      "transitionend",
      (animationendListener = () => {
        smartAlert.removeEventListener(
          "transitionend",
          animationendListener
        );
        //call any handler you want here, if needed
        resolve(message);
      })
    );
  });
};

Answer 1

我希望所有的點擊都可以查詢並一個接一個地調用removeSlideup() *

嗯，是的，那你需要一個隊列。 目前您的代碼中沒有。 最簡單的方法就是一個 promise 鏈：

let queue = Promise.resolve();
$('button[name="btn_show"]').click(function () {
  queue = queue.then(slideUp);
});