{"id":5818,"date":"2021-11-18T01:00:00","date_gmt":"2021-11-18T00:00:00","guid":{"rendered":"https:\/\/alvarotrigo.com\/epa\/wait-1-second-javascript\/"},"modified":"2026-02-24T21:40:46","modified_gmt":"2026-02-24T20:40:46","slug":"wait-1-second-javascript","status":"publish","type":"post","link":"https:\/\/alvarotrigo.com\/blog\/wait-1-second-javascript\/","title":{"rendered":"JavaScript Wait 1 Second: Best Methods [ + Examples ]"},"content":{"rendered":"\n

Need to make JavaScript wait 1 second (1000ms)? Use a non-blocking delay. JavaScript cannot truly \u201csleep\u201d the main thread without freezing the page.<\/p>\n\n\n

JavaScript wait 1 second (1000ms), the best options<\/h2>\n\n\n

Pick the pattern that matches your code style. All three schedule work later, they do not pause execution synchronously.<\/p>\n\n\n\n

  1. setTimeout(() => { ... }, 1000)<\/code> for callback-based code<\/li>
  2. await delay(1000)<\/code> for async\/await flows (recommended)<\/li>
  3. await setTimeout(1000)<\/code> in Node.js with node:timers\/promises<\/code><\/li><\/ol>\n\n\n
    \/\/ 1) Callback style<\/span>\nsetTimeout(()<\/span> =><\/span> {\n  console<\/span>.log(\"after 1 second\"<\/span>);\n}, 1000<\/span>);\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n
    \/\/ 2) async\/await style<\/span>\nawait<\/span> delay(1000<\/span>);\nconsole<\/span>.log(\"after 1 second\"<\/span>);\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n
    \/\/ 3) Node.js (v15+) promise timer<\/span>\nimport<\/span> { setTimeout } from<\/span> \"node:timers\/promises\"<\/span>;\nawait<\/span> setTimeout(1000<\/span>);\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n
    Option 1, Wait 1 second using setTimeout (browser or Node)<\/h2>\n\n\n
    setTimeout<\/code> is the classic \u201cwait 1 second\u201d tool. It schedules a callback to run later, it does not block your code.<\/p>\n\n\n
    console<\/span>.log(\"Executed now\"<\/span>);\n\n\/\/ 1 second delay<\/span>\nsetTimeout(()<\/span> =><\/span> {\n  console<\/span>.log(\"Executed after 1 second\"<\/span>);\n}, 1000<\/span>);\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    The second argument is milliseconds. For 1 second, pass 1000<\/code>.<\/p>\n\n\n
    setTimeout does not block, here\u2019s the execution order<\/h3>\n\n
    console<\/span>.log(\"Executed now\"<\/span>);\n\nsetTimeout(()<\/span> =><\/span> {\n  console<\/span>.log(\"Executed after 1 second\"<\/span>);\n}, 1000<\/span>);\n\nconsole<\/span>.log(\"Executed before the delay\"<\/span>);\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
    Expected output order:<\/strong><\/p>\n\n\n\n
    • Executed now<\/code><\/li>
    • Executed before the delay<\/code><\/li>
    • Executed after 1 second<\/code><\/li><\/ul>\n\n\n\n
      Code after setTimeout<\/code> runs immediately because the callback is queued for later.<\/p>\n\n\n
      Common setTimeout mistakes<\/h3>\n\n\n
      • Forgetting that code after setTimeout<\/code> runs right away<\/li>
      • Nesting many timers and creating callback hell<\/li>
      • Using a string callback like setTimeout(\"doStuff()\", 1000)<\/code>, don\u2019t do that<\/li><\/ul>\n\n\n
        Option 2, JavaScript sleep 1 second with Promise + async\/await (recommended)<\/h2>\n\n\n
        If you\u2019re searching for \u201cjavascript sleep 1 second\u201d, this is the clean approach. You still are not blocking the thread, you\u2019re just awaiting a Promise that resolves after 1000ms.<\/p>\n\n\n
        Copy-paste delay() helper<\/h3>\n\n
        const<\/span> delay = (ms<\/span>) =><\/span> new<\/span> Promise<\/span>((resolve<\/span>) =><\/span> setTimeout(resolve, ms));\n\nawait<\/span> delay(1000<\/span>);\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
        Drop that helper into your project, then use await delay(1000)<\/code> anywhere inside an async<\/code> function.<\/p>\n\n\n
        const<\/span> delay = (ms<\/span>) =><\/span> new<\/span> Promise<\/span>((resolve<\/span>) =><\/span> setTimeout(resolve, ms));\n\nasync<\/span> function<\/span> init<\/span>(<\/span>) <\/span>{\n  console<\/span>.log(\"now\"<\/span>);\n\n  await<\/span> delay(1000<\/span>);\n  console<\/span>.log(\"after 1 second\"<\/span>);\n\n  await<\/span> delay(1000<\/span>);\n  console<\/span>.log(\"after 2 seconds\"<\/span>);\n}\n\ninit();\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
        CTA:<\/strong> Copy the delay()<\/code> helper and use await delay(1000)<\/code> in your async functions. It keeps timing code readable.<\/p>\n\n\n
        Example, sequential waits with async\/await<\/h3>\n\n\n
        Async\/await shines when you need multiple waits in a row without nesting callbacks.<\/p>\n\n\n
        const<\/span> delay = (ms<\/span>) =><\/span> new<\/span> Promise<\/span>((resolve<\/span>) =><\/span> setTimeout(resolve, ms));\n\nasync<\/span> function<\/span> run<\/span>(<\/span>) <\/span>{\n  for<\/span> (let<\/span> i = 1<\/span>; i <= 3<\/span>; i++) {\n    console<\/span>.log(`step ${i}<\/span>`<\/span>);\n    await<\/span> delay(1000<\/span>);\n  }\n  console<\/span>.log(\"done\"<\/span>);\n}\n\nrun();\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n
        Browser support<\/h3>\n\n\n
        Promises and async\/await work in modern browsers. If you must support very old browsers like IE11, you need a polyfill or transpile your code.<\/p>\n\n\n\n
        You can test it here:<\/p>\n\n\n\n
        CodePen Embed Fallback<\/div>\n\n\n
        Option 3, Node.js wait 1 second with timers\/promises<\/h2>\n\n\n
        In Node.js, you can use the built-in promise-based timers API. It reads nicely and avoids writing your own helper.<\/p>\n\n\n
        Node.js (v15+) built-in promise setTimeout<\/h3>\n\n
        import<\/span> { setTimeout } from<\/span> \"node:timers\/promises\"<\/span>;\n\nconsole<\/span>.log(\"now\"<\/span>);\nawait<\/span> setTimeout(1000<\/span>);\nconsole<\/span>.log(\"after 1 second\"<\/span>);\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n
        Node.js CommonJS version<\/h3>\n\n
        const<\/span> { setTimeout } = require<\/span>(\"node:timers\/promises\"<\/span>);\n\n(async<\/span> (<\/span>) =><\/span> {\n  console<\/span>.log(\"now\"<\/span>);\n  await<\/span> setTimeout(1000<\/span>);\n  console<\/span>.log(\"after 1 second\"<\/span>);\n})();\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n
        When to use this vs delay()<\/h3>\n\n\n
        Use node:timers\/promises<\/code> when you\u2019re in Node 15+. Use a delay()<\/code> helper when you want the same code to work in both browser and Node.<\/p>\n\n\n
        Avoid this, blocking \u201csleep\u201d loops freeze the page<\/h2>\n\n\n
        A busy-wait loop blocks the main thread. It freezes UI, delays rendering, and can make your page look broken. Avoid it except for demos.<\/p>\n\n\n
        Busy-wait example (not recommended)<\/h3>\n\n\n
        Warning:<\/strong> Do not use in production.<\/p>\n\n\n
        const<\/span> wait = (ms<\/span>) =><\/span> {\n  const<\/span> start = Date<\/span>.now();\n  let<\/span> now = start;\n  while<\/span> (now - start < ms) {\n    now = Date<\/span>.now();\n  }\n};\n\nconsole<\/span>.log(\"Executed now\"<\/span>);\nwait(1000<\/span>);\nconsole<\/span>.log(\"Executed after 1 second\"<\/span>);\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
        The loop keeps the CPU busy until time passes. No clicks, no paints, no smooth scrolling, nothing else gets a turn.<\/p>\n\n\n
        Why the DOM does not update during a busy wait<\/h3>\n\n\n
        Browsers update the DOM between tasks, after the call stack clears. A busy-wait never lets the stack clear, so rendering and events get stuck until your loop ends.<\/p>\n\n\n\n
        And to prove it, see the following example, where the console.log<\/code> gets fired after 1 second (as we would expect), but both of the DOM writes happen at the same time:<\/p>\n\n\n\n
        CodePen Embed Fallback<\/div>\n\n\n
        Real-world use cases for a 1-second delay<\/h2>\n\n\n
        A 1-second wait is common for UI timing, polling, and simple rate limiting. Use a non-blocking delay so your app stays responsive.<\/p>\n\n\n
        UI delay in the browser (spinner, tooltip)<\/h3>\n\n
        const<\/span> delay = (ms<\/span>) =><\/span> new<\/span> Promise<\/span>((resolve<\/span>) =><\/span> setTimeout(resolve, ms));\n\nasync<\/span> function<\/span> showSpinnerForOneSecond<\/span>(<\/span>) <\/span>{\n  const<\/span> spinner = document<\/span>.querySelector(\"#spinner\"<\/span>);\n  spinner.hidden = false<\/span>;\n\n  await<\/span> delay(1000<\/span>);\n\n  spinner.hidden = true<\/span>;\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n
        Polling every second<\/h3>\n\n
        const<\/span> delay = (ms<\/span>) =><\/span> new<\/span> Promise<\/span>((resolve<\/span>) =><\/span> setTimeout(resolve, ms));\n\nasync<\/span> function<\/span> pollStatus<\/span>(getStatus<\/span>) <\/span>{\n  while<\/span> (true<\/span>) {\n    const<\/span> status = await<\/span> getStatus();\n    if<\/span> (status === \"done\"<\/span>) return<\/span> status;\n    await<\/span> delay(1000<\/span>);\n  }\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n
        Rate limiting API calls (1 request per second)<\/h3>\n\n
        const<\/span> delay = (ms<\/span>) =><\/span> new<\/span> Promise<\/span>((resolve<\/span>) =><\/span> setTimeout(resolve, ms));\n\nasync<\/span> function<\/span> fetchWithOneSecondGap<\/span>(urls<\/span>) <\/span>{\n  const<\/span> results = [];\n\n  for<\/span> (const<\/span> url of<\/span> urls) {\n    const<\/span> res = await<\/span> fetch(url);\n    results.push(await<\/span> res.json());\n    await<\/span> delay(1000<\/span>);\n  }\n\n  return<\/span> results;\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n
        Pitfalls and accuracy, why \u201c1 second\u201d is not always exact<\/h2>\n\n\n
        Even with setTimeout(..., 1000)<\/code>, the callback runs \u201cnot before 1000ms\u201d, not \u201cexactly at 1000ms\u201d.<\/p>\n\n\n
        Inactive tabs can throttle timers<\/h3>\n\n\n
        Browsers often throttle timers in background tabs to save battery and CPU. Your \u201cwait 1 second\u201d might become several seconds if the tab is inactive.<\/p>\n\n\n\n
        If you need precise scheduling, don\u2019t rely on timers alone. Measure real elapsed time and correct for it.<\/p>\n\n\n
        Minimum delay and timer drift<\/h3>\n\n\n
        Heavy CPU work, lots of queued tasks, or a busy event loop can delay timer callbacks. Expect drift under load. If accuracy matters, check Date.now()<\/code> or performance.now()<\/code> and adjust.<\/p>\n\n\n
        FAQ<\/h2>\n\n
        How do I wait 1 second in JavaScript?<\/h3>\n\n
        setTimeout(()<\/span> =><\/span> {\n  console<\/span>.log(\"after 1 second\"<\/span>);\n}, 1000<\/span>);\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n
        How do I sleep 1 second in JavaScript using async\/await?<\/h3>\n\n
        const<\/span> delay = (ms<\/span>) =><\/span> new<\/span> Promise<\/span>((r<\/span>) =><\/span> setTimeout(r, ms));\n\nawait<\/span> delay(1000<\/span>);\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n
        Does JavaScript have a built-in sleep() function?<\/h3>\n\n\n
        No built-in sleep()<\/code> for browsers. You typically use setTimeout<\/code> or await a Promise-based delay()<\/code>. Blocking \u201csleep loops\u201d exist, but they freeze the UI and are a bad idea.<\/p>\n\n\n
        How do I wait 1 second in Node.js?<\/h3>\n\n
        import<\/span> { setTimeout } from<\/span> \"node:timers\/promises\"<\/span>;\nawait<\/span> setTimeout(1000<\/span>);\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n
        Why does setTimeout not pause the code?<\/h3>\n\n\n
        setTimeout<\/code> schedules your callback for later and returns immediately. JavaScript keeps running the next lines while the timer counts down.<\/p>\n\n\n
        Why is my setTimeout slower in a background tab?<\/h3>\n\n\n
        Browsers throttle background tabs. Timers get clamped so they fire less often to save resources, which makes 1000ms delays less reliable.<\/p>\n\n\n
        How do I test setTimeout without waiting in Jest?<\/h3>\n\n\n
        Use fake timers and advance time instantly.<\/p>\n\n\n
        jest.useFakeTimers();\n\ntest(\"waits 1 second\"<\/span>, () => {\n  const<\/span> fn = jest.fn();\n\n  setTimeout(fn, 1000<\/span>);\n  jest.advanceTimersByTime(1000<\/span>);\n\n  expect(fn).toHaveBeenCalled();\n});\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n
        Testing, how to handle waits in Jest<\/h2>\n\n
        Use fake timers instead of real 1-second waits<\/h3>\n\n\n
        Real 1-second waits make tests slow and flaky. Fake timers make timing deterministic.<\/p>\n\n\n
        jest.useFakeTimers();\n\ntest(\"waits 1 second\"<\/span>, () => {\n  const<\/span> fn = jest.fn();\n\n  setTimeout(fn, 1000<\/span>);\n  jest.advanceTimersByTime(1000<\/span>);\n\n  expect(fn).toHaveBeenCalledTimes(1<\/span>);\n});\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n
        Testing async\/await delay()<\/h3>\n\n\n
        Advance timers, then let pending microtasks run before asserting.<\/p>\n\n\n
        const<\/span> delay = (ms<\/span>) =><\/span> new<\/span> Promise<\/span>((r<\/span>) =><\/span> setTimeout(r, ms));\n\njest.useFakeTimers();\n\ntest(\"await delay(1000) resolves\"<\/span>, async<\/span> () => {\n  const<\/span> done = jest.fn();\n\n  const<\/span> p = (async<\/span> (<\/span>) =><\/span> {\n    await<\/span> delay(1000<\/span>);\n    done();\n  })();\n\n  jest.advanceTimersByTime(1000<\/span>);\n  await<\/span> Promise<\/span>.resolve();\n  await<\/span> p;\n\n  expect(done).toHaveBeenCalled();\n});\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n
        Conclusion, pick the right approach<\/h2>\n\n\n
        For \u201cjavascript wait 1 second\u201d, use a non-blocking delay.<\/p>\n\n\n\n