setTimeout In JavaScript With Example | settimeout()

In this post, we will discuss and guide the students about the JavaScript method setTimeout which is the timing-based event in javaScript sometimes these types of methods need very much more than we use them but in some cases, we don't need many JavaScript methods because it depends on time or conditions which JavaScript method is suitable or not. All the browsers support this  like Google, Internet Explorer, Edge, Firefox, Safari, and Opera mini. Thisexecute one time only when we call it in giving any function but if we want to run in loops or multiple time then we use the set interval method of JavaScript. Also, Read Input Events In JavaScript With Example.

setTimeout In JavaScript With Example

setTimeout In JavaScript With Example

Post Title	setTimeout In JavaScript With Example
Language	JavaScript
Current/ Old	Latest setTimeout In JavaScript
Half / Complete	Important setTimeout In JavaScript
Also, Read	KeyBoard Events In JavaScript
Also, Read	Mouse Event In JavaScript

setTimeout JavaScript | JavaScript settimeout() 

We use this setTimeout javaScript method when we want to execute our function only one time. after one time complete our program will stop.

setTimeout Example

    <div class="container">

        <h1>Want you know my Name ?</h1>

        <div class="showmyname"></div>

        <button id="btn">Click Here</button>

    </div>

    <script>

        const myName = document.querySelector('.showmyname');

        const btn = document.querySelector('#btn');

        const callfucnt = () => {

            myName.innerHTML = "Loading....."

            setTimeout(() => {

                myName.innerHTML = "Dilawar"

            }, 1000);

        }

        btn.addEventListener('click', callfucnt)

    </script>

setTimeout Example CSS Code

    <style>

        .container {

            width: 500px;

            height: 350px;

            margin: 0 auto;

            display: flex;

            justify-content: center;

            align-items: center;

            background-color: chocolate;

            flex-direction: column;

        }

        .container h1 {

            font-size: 2rem;

            font-family: Arial, Helvetica, sans-serif;

            font-weight: 600;

            color: black;

            margin: 20px;

        }

        .container .showmyname {

            font-size: 2rem;

            font-family: Arial, Helvetica, sans-serif;

            font-weight: 600;

            color: black;

            margin: 20px;

        }

        .container #btn {

            padding: 10px;

            margin: 10px;

            font-size: 1.5rem;

            font-weight: 600;

            font-family: Arial, Helvetica, sans-serif;

            background-color: chartreuse;

            border: none;

            cursor: pointer;

        }

        .container .showmyname{

            color: black;

        }

    </style>