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=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css"
crossorigin="anonymous">
<!-- Compressed JavaScript (Foundation JS from CDN) -->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/js/foundation.min.js"
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=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css"
crossorigin="anonymous">
<!-- Compressed JavaScript (Foundation JS from CDN) -->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/js/foundation.min.js"
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
Similar Reads
Foundation CSS JavaScript Timer Utility Foundation CSS is a responsive front-end framework for web development. It includes a variety of CSS and JavaScript utilities that can be used to build and style web applications. One of the JavaScript utilities included in Foundation is a timer utility, which can be used to execute a function after
3 min read
Foundation CSS JavaScript Utilities Foundation JavaScript Utilities is a collection of tools that can be used to enhance the functionality of your Foundation website. To use Foundation JavaScript Utilities, you first need to include the foundation.js file in your website. Once you have done this, you can use the various utilities by c
4 min read
Foundation CSS JavaScript Miscellaneous Utilities Foundation CSS is a responsive front-end framework for building web applications. It includes a set of CSS styles and JavaScript functions that can be used to create a responsive layout and add interactivity to a website. Foundation CSS JavaScript miscellaneous utilities: Foundation.GetYoDigits([num
4 min read
Foundation CSS JavaScript Events Foundation CSS JavaScript is a set of JavaScript tools and plugins that can be used to add interactivity and functionality to your website. It includes a variety of plugins for things like modals, alerts, and accordions, as well as utility functions for handling events and working with the DOM. Foun
3 min read
Foundation CSS Native Range Slider Foundation CSS is an open-source and responsive front-end framework created by ZURB in September 2011 that makes it simple to create stunning responsive websites, apps, and emails that operate on any device. Many companies, like Facebook, eBay, Mozilla, Adobe, and even Disney, use it. The framework
2 min read
JavaScript Throttling Throttling is a technique used to limit the number of times a function can be executed in a given time frame. It’s extremely useful when dealing with performance-heavy operations, such as resizing the window or scrolling events, where repeated triggers can lead to performance issues.JavaScriptfuncti
3 min read