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

setTimeout In JavaScript With Example


Post TitlesetTimeout In JavaScript With Example
LanguageJavaScript
Current/ OldLatest setTimeout In JavaScript
Half / CompleteImportant setTimeout In JavaScript
Also, ReadKeyBoard Events In JavaScript
Also, ReadMouse 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>




Timing Based Events In JavaScript

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>

Post a Comment

Powered by Blogger.