JavaScript Tutorial

Javascript Check if Cookies are Enabled Javascript Get Element Height Javascript Change Button Color Javascript Refresh Page Every 5 Seconds Allow only Numbers in Textbox Javascript Javascript Get Client Ip Address Javascript Clear form After Submit Javascript Change Title and Meta DescriptionTags Javascript foreach Object Draggable and Resizable Div Javascript Javascript Capitalize First Letter of Each Word Input Type Date Disable Future Date Javascript Check if date is in the Past Javascript Add Class onClick Javascript Date Yesterday Javascript Check if a Date is contained in an Array - React Js | Vue Js Javascript Random Date Between Two Dates Javascript Check if Date is Empty Find object by id in array Javascript Javascript Popup Input Get Domain From Email Javascript Javascript Check Email Domain Type Javascript Add Text to Div Add Remove Class to Body - Toggle Class Leap Year Program in Javascript Javascript split array to Chunks Javascript Replace Underscore with Space and Capitalize Js Add Space Before Capital Letter Javascript Get Day from Date Javascript Get Element By ClassName Javascript Wait 5 Seconds Javascript Paste from Clipboard Javascript Convert SGPA to Percentage Javascript Change Dynamic Open Graph Meta Tags Title & Description Javascript Slide Left or Right to Seek Javascript Calculate Sum of the First N Natural Numbers JavaScript: Get the First and Last Elements from an Array Jquery Check Clicked Element is Div or Not Jquery Create UL and LI tags dynamically with JSON data Jquery Toggle Element Visibility Use jQuery to Dynamically Change Page Title and Meta Description jQuery Change Image Src Dynamically JQuery Scroll to Div Id JQuery Get Element Height and Width Jquery Scroll to Top Button Jquery Radio Button Get Checked Value Javascript Date Format Javascript Get Current Year Javascript Get Last Date of Month Javascript Add Space Every 4 Character Javascript Change Font Awesome Icon onclick Javascript Random Future Date Generator Javascript Check if Element is in Array How to Dynamically Add a Font Awesome Icon with Javascript Javascript Check if Date is in Current Month Javascript Handling Multiple Inputs with a single onchange Handler Javascript Get Operating System Javascript Add Values to an Array of Objects Javascript Only One Checkbox Selected at a Time Javascript Remove Property from Object Javascript Add 0 to Single Digit Javascript Sum Array of Objects Javascript Track Time Spent on Page Javascript window.performance.now() How to Detect Browser and Tab Closing in Javascript Javascript Get Last Two Digits of Year

Javascript Wait 5 Seconds

In this tutorial, we will learn how to use the setTimeout function to create a delay or pause in the execution of a code block. We will also see how to disable a button for a certain amount of time using this function. To disable a button for a certain amount of time such as 5, 10 and 30 sec, we can use the setTimeout function along with the disabled property of the button element. The disabled property is a boolean value that indicates whether the button is disabled or not. To disable a button, we can set its disabled property to true. To enable a button, we can set its disabled property to false.

written

reviewed

updated

Example 1 : Javascript Disable Button For 5 Seconds

In this example, we cover how to disable a JavaScript button for 5 seconds. Upon clicking, the button becomes unclickable or disabled and displays the message 'Wait for 5 seconds...'. After the 5-second delay, the button becomes enabled again

Disable Button for 5 Seconds Javascript

  <div class="container">
      <h3>Javascript Disable Button for 5 Seconds</h3>
      <button id="myButton" onclick="disableButton()">Click me</button>
    </div>
    <script>
      function disableButton() {
        const button = document.getElementById("myButton");
        button.disabled = true;
        button.innerText = "Wait for 5 seconds...";
        setTimeout(() => {
          button.disabled = false;
          button.innerText = "Click me";
        }, 5000);
      }
    </script>

Run

Output of Javascript Disable Button For 5 Seconds

Example 2 : Javascript Disable Button For 30 Seconds

In this example, we will disable the button for 30 seconds using JavaScript's setTimeout function to delay re-enabling the button. Initially, we set the button's disabled property to true. After 30 seconds, we use setTimeout again to set the disabled property to false.

Javascript Disable Button for 30 Seconds Code

  <button id="myButton">Click Me</button>
  <script>
    // Get a reference to the button element
    var button = document.getElementById("myButton");

    // Function to disable the button for 30 seconds
    function disableButton() {
      button.disabled = true; // Disable the button
      button.innerText = "Wait for 30 seconds...";
      setTimeout(function () {
        button.disabled = false; // Enable the button after 30 seconds
      }, 30000); // 30,000 milliseconds = 30 seconds
    }

    // Attach the disableButton function to the button's click event
    button.addEventListener("click", disableButton);
  </script>

Run

Output of Javascript Disable Button for 30 Seconds

Example 3 : Disable Button for in 10 Seconds by using Javascript

In this Third example of this tutorial, we increase the time for enabling the button, such that we disable the button for 10 seconds upon clicking it, using JavaScript's setTimeout function.

Javascript Disable Button for 10 Seconds Code

  <button id="myButton">Click Me</button>
  <script>
    // Get a reference to the button element
    var button = document.getElementById("myButton");

    // Function to disable the button for 10 seconds
    function disableButton() {
      button.disabled = true; // Disable the button
      button.innerText = "Wait for 10 seconds...";
      setTimeout(function () {
        button.disabled = false; // Enable the button after 30 seconds
      }, 10000); // 10,000 milliseconds = 10 seconds
    }

    // Attach the disableButton function to the button's click event
    button.addEventListener("click", disableButton);
  </script>

Run