setInterval立即執行

一、setInterval立即執行的概念

setInterval是JavaScript中定時器的一種用法，用於指定每隔一段時間就執行一次指定的函數。通常情況下，這個指定的時間是以毫秒為單位的，比如setInterval(function()…, 1000)，意味著每隔1秒就會執行一次function()函數體中的代碼。但是，當setInterval()函數被調用時，它並不會立即執行，而是要等到指定的時間間隔之後才會執行。

然而，在某些場景下，我們需要讓setInterval在執行之後立即執行一次，而不需要等待一段時間間隔，這時候我們就需要用到setInterval立即執行的解決方案。

function foo() {
   console.log("Hello!");
}

// 每隔1秒執行一次foo函數
var intervalId = setInterval(foo, 1000);

二、方法1：立即執行一次後才按照指定間隔執行

我們可以在setInterval函數中加入一次立即執行的調用，使用clearInterval清除第一次調用即可。

function foo() {
  console.log("Hello!");
}

// 每隔1秒執行一次foo函數
var intervalId = setInterval(function() {
  foo();
  
  // 立即執行後清除第一次調用
  clearInterval(intervalId);
  // 繼續按照指定時間間隔循環調用
  intervalId = setInterval(foo, 1000);
}, 0);

在這個例子中，我們使用了clearInterval來清除第一次調用，然後在下一個循環中繼續按照指定的時間間隔循環調用。

三、方法2：使用setTimeout模擬setInterval的立即執行

另一種方法是使用setTimeout來模擬setInterval的立即執行。在第一次調用函數之後，我們可以使用setTimeout來按照指定的時間間隔再次調用函數。

function foo() {
  console.log("Hello!");
  
  // 使用setTimeout模擬setInterval的立即執行
  setTimeout(foo, 1000);
}

// 立即執行foo函數
foo();

在這個例子中，我們在第一次調用函數的時候就立即執行了，並在函數體內使用setTimeout模擬了setInterval的按時間間隔執行的效果。

四、方法3：使用Immediately Invoked Function Expression (IIFE)

另一種解決方案是使用IIFE，它可以在啟動時就立即調用函數，然後按照指定的時間間隔執行函數。

(function foo() {
  console.log("Hello!");
  // 每隔1秒執行一次foo函數
  setTimeout(foo, 1000);
})();

在這個例子中，我們使用了IIFE立即調用了foo函數，然後使用setTimeout按照指定時間間隔再次調用了函數。

五、方法4：使用Promise和async/await

最後一種解決方案是使用Promise和async/await，它可以在啟動時立即執行函數，並使用async/await按照指定的時間間隔再次調用函數。

function delay(interval) {
  return new Promise(resolve => {
    setTimeout(resolve, interval);
  });
}

async function foo() {
  console.log("Hello!");
  // 每隔1秒執行一次foo函數
  await delay(1000);
  foo();
}

// 立即執行函數foo
foo();

在這個例子中，我們定義了一個Promise函數delay用於延遲指定的時間，然後在函數體內使用async/await按照指定時間間隔再次調用了函數。

六、小結

在執行JavaScript中的setInterval函數時，我們需要注意函數並不會立即執行，而是等待指定的時間間隔之後才會執行。如果我們需要讓函數在執行後立即執行一次，可以使用本文介紹的多種解決方案，包括在setInterval函數中添加一次立即執行的調用、使用setTimeout模擬setInterval的立即執行、使用Immediately Invoked Function Expression (IIFE)和使用Promise和async/await。

使用這些方法能夠方便我們的代碼編寫，並且可以保證我們的代碼按照期望來執行。