JavaScript blocks are usually executed simultaneously. But sometimes you may want your code to be executed in an arbitrarily scheduled manner. There are natural timer functions in JavaScript for these operations. In this article, how to use these functions is explained with examples.

Here are the JavaScript timer functions. It is generally used for the following operations.

setTimeout(): You use it if you want your function to run once after the specified delay.

setInterval(): Used for operations that will be run repeatedly, such as animations. The function is called again after the specified delay.

requestAnimationFrame(): Used in animation calls. It allows the function that will perform the animation to be called before the previous painting. Optimizes the repaint and flow cycle in animations.

Using window.setTimeout() Allows a function to be executed after the timer expires. var TimerId = window.setTimeout(func[, delay, param1, param2, …]);

Parameters

funk: function to be executed after the delay

Delay: refers to the time required for the function to run. param1, param2, : represent the parameters to be sent to the function.

Return Value TimerId: It refers to a unique non-zero value defined by the setTimeOut() method. This value is used by the window.clearTimeout() method to cancel the timer.

Example 1:

Click the button and wait 3 seconds

< button onclick="Give warning()">Click< /button>

function GiveWarning() {
setTimeout(function(){ alert("Hello World"); }, 3000);
}

Example 2:

Timer Example window.setTimeOut()

< button onclick="GiveWarning();"< span class="keyword operator">>Warn after 3 seconds< /button< span class="keyword operator">>
< button onclick="schedulingCancel();"< span class="keyword operator">>Cancel Scheduling< /button>
var timerId;

function GiveWarning() {
timerId = window.setTimeout(timer, 3000);
}

function timer() {
alert("3000ms passed since click");
}

function schedulingCancel() {
window.clearTimeout(timerId);
}

Example 3:

A warning will be given 3 seconds after the page loads.


setTimeout(example,3000);

function example() {
document.getElementById("result").innerHTML=< span class="string">"Time's up.";
}

Using window.setInverval()

Execute a piece of code or a function with a fixed delay between each call.

var intervalID = window.setInterval(func, delay[, param1, param2, …]);

Parameters

funk: function to be executed after the delay

Delay: refers to the time required for the function to run. param1, param2, : represent the parameters to be sent to the function.

Return Value intervalID : Refers to a unique non-zero value defined by the window.setInterval() method. This value is used by the window.clearInterval() method to cancel the timer. Example 1: < button onclick="example()">Run< /button> var inervalID; function example() { inervalID = setInterval(Warning, 3000); } function GiveWarning() { alert("Hello World!"); } Example 2: < button onclick="intervalCalistir();"< span class="keyword operator">>Run< /button> < button onclick="intervalStop();"< span class="keyword operator">>Stop< /button> var zId; function intervalRun() { zId = setInterval(divPrint, 1000); } function Printdiv() { var panel = document.getElementById("panel"); panel.innerHTML +="Hello World "; } function intervalStops() { clearInterval(zId); } Example 3: var inervalID; function colorInterval() { inervalID = setInterval(Warning, 1000); } function GiveWarning() { var color1= Math.floor(255*Math.random()); var Renk2= Math.floor(255*Math.random()); var Renk3= Math.floor(255*Math.random()); document.body.style.backgroundColor="rgb("+color1+","+color2+","+color3+ )"; } Using window.requestAnimationFrame()

The setInterval method was used to perform scheduled functions in JavaScript. To perform animations at the desired speed (if you want to display more than 50 frames per second), window.requestAnimationFrame is now used. window.requestAnimationFrame(function);

funk: It refers to the function that takes a single number representing the current system time as a parameter by the Performance.now() method.

Example 1:

x
var initial = null;
var tag = document.getElementById("motion");
label.style.position = 'absolute';

function step(time) {
if (!start) start = time;
var progress = time - start;
tag.style.left = Math.min(progress/10, 200) + "px";
if (progress < 2000) {
window.requestAnimationFrame(step);
}
}
window.requestAnimationFrame(step);

Example 2:

div {
width: 20px;
height: 20px;
background: #1DABB8;
float: left;
}

button {
position: absolute;
ball: 20px;
left: 20px;
}

#stop {
left: 100px;
}

var animateFrameId;
function play() {
var element= document.createElement("div");
document.body.appendChild(element);
animateFrameId = requestAnimationFrame(play);
}
animateFrameId = requestAnimationFrame(play);

Example 3:

div {
width: 20px;
height: 20px;
float: left;
}

button {
position: absolute;
ball: 20px;
left: 20px;
}

#stop {
left: 100px;
}
var animateFrameId;
function play() {
var element= document.createElement("div");
document.body.appendChild(element);
var color1= Math.floor(255*Math.random());
var Renk2= Math.floor(255*Math.random());
var Renk3= Math.floor(255*Math.random());
element.style.backgroundColor="rgb("+color1 +","+color2+","+color3+")";

animateFrameId = requestAnimationFrame(play);
}
animateFrameId = requestAnimationFrame(play);