在setInterval中調用onClick function

Question

我有一個按預期工作的onClick function。 通過單擊觸發此 function 一次后，我想使用setInterval定期運行它。

這是我修改代碼以嘗試執行此操作的方式：

    var clickData;
    var isClicked=0;

    function onClick(e) {
      console.log("OnClick called")
      if(isClicked==0){
        clickData = this;
        isClicked = 1;
        console.log(clickData);
      }

      let empID = clickData.options.empID;
      let reqURL = baseurl  + API_KEY + "&MonitoringRef=" + empID;

      $.ajax({
          type: "GET",
          dataType: "jsonp",
          url: reqURL,
          success: success2,

        });

    }

    if(isClicked==1){
      var f = onClick;
      f.paramater1 = clickData;
      setInterval(f, 500); 
    }

    function success2(json2){
      console,log(json2);
      //Do something with json2...
    }

我已經根據此處的一對一答案修改了setInterval中 function 的調用。

我認為這里的問題是將參數傳遞給 function。有沒有辦法實現這個？

Answer 1

問題是在 function 本身中創建間隔時，進行了無限增長的間隔調用，這可能就是它不起作用的原因。 解決方法可能是這樣的：

您定義一個 function 並使用來自 onClick 的 setTimeout 調用它：

function onClick(e) {
   // Your onClick function body ...

   // Add this in your onClick function to call the following function that creates the interval
   setTimeout( function() { startInterval(clickData); }, 1);
}

現在，在startInerval function，可以調用onClick； 但是為了防止累積間隔，我聲明了一個標志來檢查並只創建一次間隔：

var checkFlag = false;
function startInterval(clickData){
   if(checkFlag === false){
      checkFlag = true;
      setInterval(function(){onClick(clickData);}, 500);
   }
}

Answer 2

您可以使用添加點擊監聽器，然后在按下按鈕並設置間隔后刪除點擊監聽器：

const buttonID = document.getElementById("INSERT-ID-OF-YOUR-BUTTON-HERE")

const yourFunction = () => {
    // your code that you want to be called twice per second goes here
    buttonID.removeEventListener("click")
}

buttonID.addEventListener("click", () => {
    setInterval(yourFunction, 500);
});