[JS TS] sleepする方法一覧

yosi2024/09/11 10:11

JSでsleepする方法を複数教えてください。

マークダウンで回答してください。ただし、方法の名前を#(H1)とします。
各方法はsleepする関数を作成し、引数はミリ秒とします。
コードはJSとTSの両方を作成してください。

Answerer AIPowered by gpt-3.5-turbo

セットタイムアウトを使用する方法

// JavaScript
function sleepWithSetTimeout(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function main() {
  console.log('Before sleep');
  await sleepWithSetTimeout(2000);
  console.log('After sleep');
}

main();

// TypeScript
function sleepWithSetTimeout(ms: number): Promise<void> {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function main() {
  console.log('Before sleep');
  await sleepWithSetTimeout(2000);
  console.log('After sleep');
}

main();

アクセス可能なウェイトAPIを使用する方法

// JavaScript
function sleepWithWait(ms) {
  const start = new Date().getTime();
  let now = new Date().getTime();
  while (now - start < ms) {
    now = new Date().getTime();
  }
}

function main() {
  console.log('Before sleep');
  sleepWithWait(2000);
  console.log('After sleep');
}

main();

// TypeScript
function sleepWithWait(ms: number): void {
  const start = new Date().getTime();
  let now = new Date().getTime();
  while (now - start < ms) {
    now = new Date().getTime();
  }
}

function main() {
  console.log('Before sleep');
  sleepWithWait(2000);
  console.log('After sleep');
}

main();

Promiseを使用する方法

// JavaScript
function sleepWithPromise(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

function main() {
  console.log('Before sleep');
  sleepWithPromise(2000).then(() => {
    console.log('After sleep');
  });
}

main();

// TypeScript
function sleepWithPromise(ms: number): Promise<void> {
  return new Promise(resolve => setTimeout(resolve, ms));
}

function main() {
  console.log('Before sleep');
  sleepWithPromise(2000).then(() => {
    console.log('After sleep');
  });
}

main();

async/awaitを使用する方法

// JavaScript
function sleepWithAsyncAwait(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function main() {
  console.log('Before sleep');
  await sleepWithAsyncAwait(2000);
  console.log('After sleep');
}

main();

// TypeScript
function sleepWithAsyncAwait(ms: number): Promise<void> {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function main() {
  console.log('Before sleep');
  await sleepWithAsyncAwait(2000);
  console.log('After sleep');
}

main();

yosi2024/09/11 10:12

各手法の解説をしてください。

Answerer AIPowered by gpt-3.5-turbo

セットタイムアウトを使用する方法

この方法では、setTimeout関数を使用して指定されたミリ秒数後にコールバック関数が呼び出されるようにします。setTimeout関数の戻り値はタイマーIDであり、clearTimeout関数を使用してタイマーをキャンセルすることもできます。Promsieを使用して非同期的に処理する場合は、setTimeout関数をラップしたPromiseを返す関数を作成し、awaitキーワードとasync関数を使用して非同期的に待つことができます。

アクセス可能なウェイトAPIを使用する方法

この方法では、現在のタイムスタンプと指定されたミリ秒数を比較しながらウェイトを実装します。指定されたミリ秒数の間、whileループ内で現在のタイムスタンプを確認し続けます。指定されたミリ秒数が経過した後、ループが終了し、次の処理が実行されます。この方法は単純ですが、非効率なため、他の方法に比べて推奨されません。

Promiseを使用する方法

この方法では、setTimeout関数をラップしたPromiseを返す関数を作成します。関数が呼び出された時点で、指定されたミリ秒数後にsetTimeout関数に渡されたコールバックが実行されます。その後、resolve関数が呼び出され、Promiseが完了します。この方法では、thenメソッドまたはawaitキーワードを使用して、非同期に処理を待つことができます。

async/awaitを使用する方法

この方法では、setTimeout関数をラップしたPromiseを返す関数を作成します。setTimeout関数に渡されたコールバックが実行され、指定されたミリ秒数後にresolve関数が呼び出されます。その後、awaitキーワードを使用して非同期に待ち、指定されたミリ秒数が経過するのを待ちます。非同期関数内でawaitキーワードを使用することで、コードの読みやすさを向上させることができます。

yosi2024/09/11 10:16

推奨方法

JavaScript

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms))
}

TypeScript

function sleep(ms: number): Promise<void> {
  return new Promise(resolve => setTimeout(resolve, ms))
}

使用例

async function main() {
  console.log('Before sleep')
  await sleep(2000)
  console.log('After sleep')
}

main();

コメントするにはログインが必要です

yosi