Foundation CSS JavaScript Throttle Utility
Last Updated :
01 Dec, 2022
Foundation CSS is an open-source front-end framework that is used to create a beautiful responsive website, apps, or email quickly and easily. ZURB published it in September of that year. Numerous businesses, like Facebook, eBay, Mozilla, Adobe, and even Disney, make use of it. This framework, which resembles SaaS, is built on the Bootstrap framework. It is more intricate, flexible, and individualized. Working with module bundlers is also a breeze because of its command-line interface. Email framework creates HTML emails that are viewable on all devices and are mobile-friendly. With Foundation for Apps, you can make fully responsive web applications.
In this article, we will learn about the throttle function, provided by Foundation CSS as a JavaScript utility. Throttle is useful when we want to trigger a function only once in “n” milliseconds, while the event is happening. Let us learn about this with the help of some examples.
Syntax:
Foundation.utils.throttle(function(e){
....
}, n)
Note: Here “n” is time in milliseconds
Parameters:
- It takes a callback function and time (in milliseconds) as its parameters.
Example 1: In this example, we will use throttling on the input element wherein we will print the value in the input element to the console once every 1 second in the process of entering values to the input.
HTML
<!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">
<link rel="stylesheet"
href=
crossorigin="anonymous">
<script src=
</script>
<script src=
crossorigin="anonymous">
</script>
</head>
<body>
<h1 style="color:green;">Welcome to GFG</h1>
<input placeholder="enter text" id="name" />
<script>
$(document).foundation();
$('#name').on('input', Foundation.utils.throttle(function(e){
console.log(e.target.value);
}, 1000));
</script>
</body>
</html>
|
Output:
Foundation CSS JavaScript Throttle Utility
Example 2: In this example, we will use throttling on the button element wherein we will print “clicked” to the console once every 1 second in the process of clicking the button.
HTML
<!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">
<link rel="stylesheet"
href=
crossorigin="anonymous">
<script src=
</script>
<script src=
crossorigin="anonymous">
</script>
</head>
<body>
<h1 style="color:green;">Welcome to GFG</h1>
<button id="button">Click me!</button>
<script>
$(document).foundation();
$('#button').on('click', Foundation.utils.throttle(function(e){
console.log('clicked!');
}, 1000));
</script>
</body>
</html>
|
Output:
Foundation CSS JavaScript Throttle Utility
Reference: https://get.foundation/sites/docs-v5/javascript-utilities.html
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...