timer, sleepの実装(setTimeout, setInterval)

2022/11/14

JavaScriptでタイマー処理、スリープ処理を実装する方法について取り上げます。

Timer

一定時間後に処理
( setTimeout, clearTimeout )

setTimeout で一定時間後に処理を実行させることができます。

const output = () => console.log(`output: ${new Date().getSeconds()} 秒`)

console.log(`${new Date().getSeconds()} 秒`)
setTimeout(output, 3000)
console.log(`${new Date().getSeconds()} 秒`)

55 秒
55 秒
output: 58 秒

setTimeout で設定した処理をキャンセルするには、clearTimeout を利用します。

const output = () => console.log(`output: ${new Date().getSeconds()} 秒`)

console.log(`${new Date().getSeconds()} 秒`)
const timeoutId = setTimeout(output, 3000)
clearTimeout(timeoutId)
console.log(`${new Date().getSeconds()} 秒`)

一定時間ごとに処理
( setInterval, clearInterval )

setInterval で一定時間ごとに処理を実行させることができます。

const output = () => console.log(`output: ${new Date().getSeconds()} 秒`)

console.log(`${new Date().getSeconds()} 秒`)
setInterval(output, 1000)
console.log(`${new Date().getSeconds()} 秒`)

1 秒
1 秒
output: 2 秒
output: 3 秒
output: 4 秒
output: 5 秒
    :

setInterval で設定した処理をキャンセルするには、clearInterval を利用します。

const output = () => console.log(`output: ${new Date().getSeconds()} 秒`)

console.log(`${new Date().getSeconds()} 秒`)
const intervalId = setInterval(output, 1000)
setTimeout(() => clearInterval(intervalId), 3000)
console.log(`${new Date().getSeconds()} 秒`)

Sleep
( async, awaitを利用 )

async await を利用すると、以下のように可読性の良いsleep処理を実装することができます。

(async () => {
  const sleep = (second) => new Promise(resolve => setTimeout(resolve, second * 1000))

  console.log('start')
  console.log(`${new Date().getSeconds()} 秒`)

  await sleep(1)
  console.log(`${new Date().getSeconds()} 秒`)

  await sleep(2)
  console.log(`${new Date().getSeconds()} 秒`)

  await sleep(3)
  console.log(`${new Date().getSeconds()} 秒`)

  console.log('end')
})()