Scribd
Upload
9 views4 pages

08-07-2024

The document explains timer events in JavaScript, specifically the use of setTimeout and clearTimeout for managing task execution and debounce techniques. It also covers the useRef hook in React for creating memory references, along with examples demonstrating how to implement these concepts in React components. Additionally, it discusses setInterval and clearInterval for repeated task execution and provides examples of their usage in managing progress and image loading.

Uploaded by

Bharath Ane Nenu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
9 views4 pages

08-07-2024

The document explains timer events in JavaScript, specifically the use of setTimeout and clearTimeout for managing task execution and debounce techniques. It also covers the useRef hook in React for creating memory references, along with examples demonstrating how to implement these concepts in React components. Additionally, it discusses setInterval and clearInterval for repeated task execution and provides examples of their usage in managing progress and image loading.

Uploaded by

Bharath Ane Nenu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 4

Timer Events

setTimeout() : It is used to control the task bounce mechanism in


process.
It is to configure debounce for tasks in application.

FAQ: What is debounce?


Ans: It is a technique where task can be kept inactive for a specific duration of
time, and
invoke when ever required.

Syntax:
setTimeout(function(){ }, interval);

clearTimeout() : It is used to clear the task from memory before it is


released into
process.
It requires a memory reference for task in memory.

Syntax:
refName = setTimeout(function(){ }, interval);

clearTimeout(refName);

React useRef() hook

- React 18 provides useRef() hook, which is used to create a memory reference.


- The memory reference created by useRef() is designed for the tasks performed by
internal process.
- It can handle data or logic good for process and not for rendering output.

Syntax:
let thread = useRef(null);

thread.current = value/function;

Ex:
let thread = useRef(null);

thread.current = setTimeout(function(){ }, interval);

clearTimeout(thread.current);

Ex:
state-event-demo.jsx

import { useEffect, useRef, useState } from "react"

export function StateEventDemo()


{

const [msg, setMsg] = useState('');


let m1 = useRef(null);

function Msg1(){
setMsg('Hello !');
}
function Msg2(){
setMsg('How are you?');
}
function Msg3(){
setMsg('Welcome to React !');
}

function handleShowClick(){
setTimeout(Msg1, 3000);
m1.current = setTimeout(Msg2,6000);
setTimeout(Msg3,10000);
}
function handleCancelClick(){
clearTimeout(m1.current);
}

return(
<div className="container-fluid">
<button onClick={handleShowClick}>Show Msgs</button>
<button onClick={handleCancelClick}>Cancel 2nd Message</button>
<p className="mt-4 h1">{msg}</p>
</div>
)
}

setInterval() : It can load task into memory and release a copy into process,
so that
the task executed repeatedly until removed from memory.

Syntax:
setInterval(function(){ }, interval);

clearInterval() : It can remove the task from memory using a reference name.

Syntax:
clearInterval(refName);

Ex:
interval-demo.jsx

import { useRef, useState } from "react"

export function IntervalDemo()


{
const [toggleProgress, setToggleProgress] = useState('d-none');
const [toggleImage, setToggleImage] = useState('d-none');
const [toggleBtn, setToggleBtn] = useState('d-block');
const [progressValue, setProgressValue] = useState(1);

let count = useRef(1);


let suspendThread = useRef(null);

function StartProgress(){
count.current = count.current + 1;
setProgressValue(count.current);
if(count.current==100)
{
setToggleProgress('d-none');
setToggleImage('d-block');
}
}

function handleLoadClick(){
setToggleBtn('d-none');
setToggleProgress('d-block');
suspendThread.current = setInterval(StartProgress,100);
}

function handlePauseClick(){
clearInterval(suspendThread.current);
}
function handlePlayClick(){
suspendThread.current = setInterval(StartProgress,100);
}

return(
<div className="container-fluid">
<div className="d-flex justify-content-center align-items-center"
style={{height:'100vh'}}>
<div>
<div className={toggleBtn}>
<button onClick={handleLoadClick} className="btn btn-
primary">Load Image</button>
</div>
<div className={toggleProgress}>
<progress value={progressValue} min="1" max="100"
style={{width:'350px', height:'30px'}}></progress>
<p className="text-center">
<button onClick={handlePlayClick} className="btn btn-
success bi bi-play"></button>
<button onClick={handlePauseClick} className="btn btn-
danger bi bi-pause ms-1"></button>
</p>
<p className="text-center">{progressValue}% completed</p>
</div>
<div className={toggleImage}>
<img src="iphone-green.jpg" width="300" height="300" />
</div>
</div>
</div>
</div>
)
}

You might also like