Translation Javascript Timing Events

This article translates the JavaScript Tutorial playlist of up master Kudvenkat on YouTube

SOURCE Address here:

https://www.youtube.com/watch?v=PMsVM7rjupU&list=PL6n9fhu94yhUA99nOsJkKXBqokT3MBK0b

In JavaScript, a piece of code can run for a specific period of time. For example, you can run a javscript function every 1 seconds. This concept is called timing time in JavaScript.

The Global Window object has the following two methods, both of which allow us to run a piece of JavaScript code in a specific time period

SetInterval (func, delay)

This method runs a specific function and then repeats for a specific period of time. This method has two parameters. The func parameter specifies the name of the function to run. The delay parameter specifies the time period of detail to milliseconds, and then waits for the specified function to run for the next time during the specified period.

SetTimeout (func, delay)

After waiting a few milliseconds to run a specific function, this method has 2 parameters. The func parameter is the name of the function to be specified to run. The delay parameter is the amount of time to wait before executing the specified function. The specific wait time (delay) may take longer.

Let's take an example to understand timing time. The following code shows the current time and date in the DIV tag

<div id= "Timediv" ></div><script type= "Text/javascript" >    function  GetCurrentDateTime () {        document.getElementById(new  Date ();    }    GetCurrentDateTime (); </script>

The time is fixed. In order for the time to dynamically process this script, we notice that the time must be updated every second. In the following example, we use the SetInterval () method to execute the GetCurrentDateTime () function every 1000 milliseconds

<div id= "Timediv" ></div><script type= "Text/javascript" >    );     function GetCurrentDateTime () {        document.getElementById(new  Date ();    } </script>

Clearinterval (Intervalid)

This method cancels out the function that is set up repeatedly by using the SetInterval () method. Intervalid is the identifier that specifies the action to cancel. This ID is returned by the SetInterval () method. The following example shows how to use the Clearinterval () method.

Start and stop the clock by the button click action: In this example, the SetInterval () method returns a Intervalid, which is passed to the Clearinterval () method. When you click on the "Start Clock" button, Always update the time every second, when you click on the "Stop Clock" button, the clock stops.

 <div id= "Timediv" ></div><br/><input type= "button" value= "Start Clock" onclick= "Startclock () "/><input type=" button "value=" Stop Clock "onclick=" Stopclock () "/><script type=" Text/javascript ">    Span style= "COLOR: #0000ff" >var   Intervalid;  function   Startclock () {intervalid     = SetInterval (getcurrentdatetime, 1000 function   Stopclock () {Clearinterval (i    Ntervalid);  function   GetCurrentDateTime () {Docume Nt.getelementbyid ( "Timediv"). InnerHTML = new      Date (); } getcurrentdatetime ();  </script> 

Now let's take a look at the use of the settimeout () and cleartimeout () functions. Format and usage are similar to setinterval and Clearinterval ()

<input type= "text" value= "ten" id= "Txtbox"/><br/><br/><input type= "button" value= "Start Timer" onclick= "Starttimer (' Txtbox ')"/><input type= "button" value= "Stop Timer" onclick= "Stoptimer ()"/><script Type= "Text/javascript" >varIntervalid; functionStarttimer (controlId) {varControl =document.getElementById (controlId); varseconds =Control.value; Seconds= Seconds-1; if(seconds = = 0) {Control.value= "Done"; return; }        Else{Control.value=seconds; } intervalid= SetTimeout (function() {Starttimer (' Txtbox ');}, 1000); }    functionStoptimer () {cleartimeout (intervalid); }</script>

Translation Javascript Timing Events