從 setInterval 運行 function 一次

Question

我有一個setInterval function 正在計算某個日期和當前時間之間的差異。 當這種差異達到不到一個小時時，我想運行一些應該只執行一次的代碼。

const countdownDate = new Date('March 15, 2021 11:30:00').getTime();
const HOUR_IN_MILLISECONDS = 3600000;

let ticker = setInterval(() => {
    let now = new Date().getTime();
    let duration = countdownDate - now;
    
    if (duration < HOUR_IN_MILLISECONDS) {
        console.log('This will keep running');
    }
    
    if (duration === 0) {
        clearInterval(ticker);
    }
}, 1000);

我發現實現此目的的一種方法是設置一個全局標志，一旦 function 運行一次，該標志就會翻轉。

let bar = false;

function foo() {
   if (!bar) {
       console.log('This will only run once');
   }
   bar = true;
}

let ticker = setInterval(() => {

    if (duration < HOUR_IN_MILLISECONDS) {
        foo();
    }

}, 1000);

另一種可行的方法是觸發自定義事件並注冊一次性事件處理程序。 但是我不確定每秒觸發一個事件是否比以前的解決方案性能低。

const foo = new Event('foo');

document.addEventListener('foo', () => {
    console.log('This will only run once');
}, { once: true });

let ticker = setInterval(() => {

    if (duration < HOUR_IN_MILLISECONDS) {
        document.dispatchEvent(foo);
    }

}, 1000);

我假設必須有更好的方法來實現所需的行為。 我知道嘗試在setInterval內只運行一次並不是最佳做法，但到目前為止我還沒有找到任何其他解決方法。

Answer 1

你可以使用遞歸 function

  const start = (stop ,under)=>{
   let underHour = under;
   const countdownDate = new Date('March 15, 2021 11:30:00').getTime();
   const HOUR_IN_MILLISECONDS = 3600000;  
      if(!stop){
      setTimeout(function(){
                let now = new Date().getTime();
                let duration = countdownDate - now;
                if (!underHour) {
                  if (duration < HOUR_IN_MILLISECONDS) {
                    console.log('This will keep running');
                    underHour = true;
                  }
                }
    
                start(duration === 0, underHour);
            
       },1000)
    }
} 
 
//-----------
start()