-
Notifications
You must be signed in to change notification settings - Fork 65
Expand file tree
/
Copy pathThrottling.html
More file actions
139 lines (114 loc) · 4.42 KB
/
Copy pathThrottling.html
File metadata and controls
139 lines (114 loc) · 4.42 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!-- 💡"JavaScript-with-JC"
👉 Throttling Implementation
Throttling is a technique used to improve the performance of applications by limiting the rate of function calls
👉 If the function is getting called continuously, We can execute the function once in the given time interval with the help of Throttling to optimize the performance of applications
💡Debouncing vs Throttling-
In Debouncing, the attached function will be executed only after the given time once the user stops calling the event.
While in Throttling, the attached function will be executed only once in a given time interval.
💡Which technique to use in a particular scenario?
For Search bar, It’s recommended to use Debouncing technique as it will give better user experience
For Shooting game, Browser resizing and Scrolling feeds, It’s recommended to use Throttling technique.
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
min-height: 500vh;
}
.button {
width: 70px;
height: 70px;
border-radius: 50%;
background-color: aquamarine;
border: none;
cursor: pointer;
}
.button:active {
background-color: red;
}
</style>
</head>
<body>
<div style="display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 20vh;">
<button class="button" onclick="normalShooting()">Normal</button>
<button class="button" onclick="throttledShooting()">Throttled</button>
</div>
<!-- <h1 style="text-align: center">
Window Scrolling
</h1> -->
<script>
// 💡Throttling Implementation
const throttle = function (callback, interval) {
let isAvailable = true;
return function () {
const context = this
const args = arguments
if (isAvailable) {
callback.apply(context, args)
isAvailable = false
setTimeout(() => {
isAvailable = true
}, interval)
}
}
}
// 💡 1) Shooting button Example
let normalShootCount = 0
let throttledShootCount = 0
// normal button Shooting
const normalShooting = function () {
normalShootCount++
console.log("normal shooting...", normalShootCount);
}
// throttled button Shooting
const buttonShooting = function () {
throttledShootCount++
console.log('throttled shooting...', throttledShootCount);
}
const throttledShooting = throttle(buttonShooting, 1000)
// 💡 2) window Resize Example
function windowResizeExample() {
let normalCount = 0
let throttleCount = 0
// normal function
const normalFunction = function () {
normalCount++
console.log("normal resize window...", normalCount);
}
// throttled function
const resizeWindow = function () {
throttleCount++
console.log("throttled resize window...", throttleCount);
}
const ThrottledFunction = throttle(resizeWindow, 1000)
window.addEventListener("resize", normalFunction);
window.addEventListener("resize", ThrottledFunction);
}
windowResizeExample()
// 💡 3) Window Scroll Example
function windowScrollExample() {
let normalCount = 0
let throttleCount = 0
// normal function
const normalFunction = function () {
normalCount++
console.log("Normal window scroll...", normalCount);
}
// throttled function
const scrollWindow = function () {
throttleCount++
console.log("Throttled window scroll...", throttleCount);
}
const ThrottledFunction = throttle(scrollWindow, 1000)
window.addEventListener("scroll", normalFunction);
window.addEventListener("scroll", ThrottledFunction);
}
windowScrollExample()
</script>
</body>
</html>