asp.net core docker JavaScript timing events

Link for all dot net and sql server video tutorial playlists
http://www.youtube.com/user/kudvenkat...

Link for slides, code samples and text version of the video
http://csharp-video-tutorials.blogspo...

In JavaScript a piece of code can be executed at specified time interval. For example, you can call a specific JavaScript function every 1 second. This concept in JavaScript is called timing events.

The global window object has the following 2 methods that allow us to execute a piece of JavaScript code at specified time intervals.

setInterval(func, delay) - Executes a specified function, repeatedly at specified time interval. This method has 2 parameters. The func parameter specifies the name of the function to execute. The delay parameter specifies the time in milliseconds to wait before calling the specified function.

setTimeout(func, delay) - Executes a specified function, after waiting a specified number of milliseconds. This method has 2 parameters. The func parameter specifies the name of the function to execute. The delay parameter specifies the time in milliseconds to wait before calling the specified function. The actual wait time (delay) may be longer.

Let's understand timing events in JavaScript with an example. The following code displays current date and time in the div tag.

[div id="timeDiv" ][/div]
[script type="text/javascript"] function getCurrentDateTime() { document.getElementById("timeDiv").innerHTML = new Date(); } getCurrentDateTime();
[/script]

At the moment the time is static. To make the time on the page dynamic modify the script as shown below. Notice that the time is now updated every second. In this example, we are using setInterval() method and calling getCurrentDateTime() function every 1000 milli-seconds.

[div id="timeDiv" ][/div]
[script type="text/javascript"] setInterval(getCurrentDateTime, 1000); function getCurrentDateTime() { document.getElementById("timeDiv").innerHTML = new Date(); }
[/script]

clearInterval(intervalID) - Cancels the repeated execution of the method that was set up using setInterval() method. intervalID is the identifier of the repeated action you want to cancel. This ID is returned from setInterval() method. The following example demonstrates the use of clearInterval() method.

Starting and stopping the clock with button click : In this example, setInterval() method returns the intervalId which is then passed to clearInterval() method. When you click the "Start Clock" button the clock is updated with new time every second, and when you click "Stop Clock" button it stops the clock.

[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"] var intervalId; function startClock() { intervalId = setInterval(getCurrentDateTime, 1000); } function stopClock() { clearInterval(intervalId); } function getCurrentDateTime() { document.getElementById("timeDiv").innerHTML = new Date(); } getCurrentDateTime();
[/script]

Now let's look at example of using setTimeout() and clearTimeout() functions. The syntax and usage of these 2 functions is very similar to setInterval() and clearInterval().

Countdown timer example : When we click "Start Timer" button, the value 10 displayed in the textbox must start counting down. When click "Stop Timer" the countdown should stop. When you click "Start Timer" again, it should start counting down from where it stopped and when it reaches ZERO, it should display done in the textbox and function should return.

// timing events in javascript.png

[input type="text" value="10" 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"] var intervalId; function startTimer(controlId) { var control = document.getElementById(controlId); var seconds = control.value; seconds = seconds - 1; if (seconds == 0) { control.value = "Done"; return; } else { control.value = seconds; } intervalId = setTimeout(function () { startTimer('txtBox'); }, 1000); } function stopTimer() { clearTimeout(intervalId); }
[/script]

asp.net core docker JavaScript timing events
247 Likes	247 Dislikes
65,020 views views	524K followers
Education	Upload TimePublished on 7 Jan 2015

Related keywords

wcf vs web api,ado.net core,sql server management studio,webkinz,webadvisor,craigslist nj,wcf one piece,asp.net core 3,ajax players,weber grill parts,webtoon,tutorials by hugo,csharp corner,mvc design pattern,asp.net machine account,servers for minecraft,asp.net core dependency injection,ado.net tutorial,services angular,ajax ontario,asp.net mvc tutorial,javascript tutorial date,asp.net cos'è,csharp assembly,javascript tutorialspoint,tutorialspoint python,sql join,services briefcase,asp.net core web api,ajax jquery,wccftech,craigslist ny,asp.net zero,csharp foreach,server memes,sql date format,javascript tutorial example,services online,chase,javascript tutorial callback,serverless architecture,server resume,wcf c#,server books,tutorialspoint javascript,mvcc connect,ado.net mysql,services technologies gps,javascript tutorial indonesia pdf,ajax deadpool,server jobs,cvs,website,mvc tutorial,costco hours,wcf service application,tutorialspoint spring,serverless,wcf soap,javascript tutorial code,wcf cat,wcf test client,cool math games,services & training hse colombia sas,servicestack,citibank,asp.net core identity,sql union,ajax parking,sql database,asp.net core logging,mvconnect,asp.net guida,cunyfirst,wcf nba,csharp download,wcfi foundation,csharp online,wcf authentication,javascript tutorial pdf,tutorials near me,http://asp.net,server 2019,ado.net descargar,web of dreams,chernobyl,serverminer,ajax cleaner,ado.net visual studio 2019,webassign,ado.net vs entity framework,ado.net visual studio 2017,csharp list,sql like,asp.net mvc,asp.net core tutorial,sqlite,wcfm,ajax roster,mvc architecture,http://ado.net,asp.net core mvc,ajax soccer,server hosting,wcfi,ajax dish soap,capital one,server rack,tutorialspoint html,csharp interface,craigslist,webroot,tutorialspoint reactjs,ajax request,wcf dragon ball,asp.net core 2.2,tutorialspoint python 3,sql developer,webster,services transmission company sas,sql group by,asp.net core signalr,services manager,mvc framework,ajax paving,mvc near me,tutorialspoint spring boot,mvc map,csharp online compiler,asp.net download,sql between,ado.net c# pdf,wcf 2019 nba,javascript tutorial download,services tag dell,csharp switch,ado.net ventajas y desventajas,csharpstar,wcf tutorial,javascript tutorial web development,tutorialspoint,ajax meaning,csharp-video-tutorials.blogspot,tutorials dojo,csharp string format,central park 5,ado.net c#,javascript tutorial for beginners,asp.net core github,server status,ajax fc,server jobs nyc,asp.net core swagger,sql formatter,credit karma,services group,server error in '/' application,services windows,asp.net core 3.0,sql injection,wcf ria services,tutorialspoint c#,calculator,ado.net entity data model,sql insert,tutorialspoint tableau,services google play apk,sqlyog,asp.net core 3 release date,sql server,server job description,tutorials by a,servicenow,webcam,mvc hours,javascript tutorial library,webmd symptom,csharp array,javascript tutorial w3,csharp enum,ajax call,asp.net core 2. guida completa per lo sviluppatore,asp.net core,server pro,server status ffxiv,webcrims,cheap flights,asp.net core hosting,services sas,javascript tutorial documentation,tutorialspoint java,tutorialspoint java compiler,webmd,csharp to json,college football,ado.net dataset,csharp dictionary,cnn,website builder,tutorialspoint sql,asp.net web api,server side rendering,weber grills,sql server 2017,mvc nj,tutorialspoint spark,javascript tutorial function,ado.net oracle,asp.net core download,csharp to vb.net,webster bank,webstaurant,tutorialsystems,ajax post,services fms publish announcement,services.msc no abre,ajax jersey,csharp operator,asp.net core razor pages,server duties,asp.net core environment variables,csharp random,century 21,services consultores,services consulting,mvcsd,mvcsc,services.msc,ado.net pdf,asp.net core configuration,ajax marvel,sql update,asp.net tutorial,mvc medical,ado.net entity data model visual studio 2019,wcfs international curriculum,mvc2,javascript tutorial w3school,ado.net entity data model visual studio 2017,javascript tutorial github,chase online,wcf api,costco,server jobs near me,webex,sql meaning,sql tutorial,sql commands,javascript tutorial video,ado.net entity framework,ajax tavern,tutorialsteacher,ajax javascript,javascript tutorial for frontend developers,services desk,ajax greek,csharp tutorial,mvc pattern,ado.net sql server,ado.net connection,asp.net identity,mvcu,asp.net core middleware,wcf web service,mvc webadvisor,web store,mvcc,webmail,mvci,mvctc,