如何只讓用戶調用我的function一個

Question

我試圖通過讓用戶單擊一個按鈕來移動一個框，但我只希望用戶能夠在“javascript”中調用一次 function。

function myMove() {
  let id = null; let id2 = null;
  const elem = document.getElementById("animate");   
  let pos = 0;
  clearInterval(id);
  id = setInterval(frame, 1);


  function frame() {
    if (pos == 250) {
      clearInterval(id);
       id2 = setInterval(backframe, 1);
    } else {
      pos++; 
      elem.style.top = pos + "px"; 
      elem.style.left = pos + "px"; 
    }
  }
  function backframe() {
    if (pos == 0) {
      clearInterval(id2);
      id = setInterval(frame, 1);
    } else {
      pos--; 
      elem.style.top = pos + "px"; 
      elem.style.left = pos + "px"; 
    }
  }
   
}

Answer 1

要添加一個只觸發一次的事件監聽器， addEventListener可以接受 3 個參數， type, listener, options

options是一個 object ，它有一個名為once的屬性，您已將其設置為true 。

前任：

button.addEventListener('click', myMove, { once: true })

Answer 2

將這些修改應用於您的代碼：

let wasUsed = false;

function myMove() {
  if (wasUsed) return; // stops the function if it has ran before
  wasUsed = true;
  // the rest of your function doesn't change:
  let id = null; let id2 = null;
  ...
}

Answer 3

button.addEventListener('click', myMove, { once: true })