La limitación o, a veces, también llamada función de aceleración, es una práctica utilizada en los sitios web. La limitación se usa para llamar a una función después de cada milisegundo o un intervalo de tiempo particular, solo el primer clic se ejecuta inmediatamente.
Veamos qué sucederá si la función de acelerador no está presente en la página web. Luego, la cantidad de veces que se hace clic en un botón, la función se llamará la misma cantidad de veces. Considere el ejemplo.
Sin función de limitación: en este código, suponga que si se hace clic en el botón 500 veces, se hará clic en la función 500 veces, esto está controlado por una función de limitación.
- Programa:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width,
initial-scale=1.0" />
<title>
JavaScript | Without Throttling
</title>
</head>
<body>
<button id="nothrottle">Click Me</button>
<script>
// Selected button with th egiven id
const btn = document.querySelector("#nothrottle");
// Add event listener to the button
// to listen the click event
btn.addEventListener("click", () => {
console.log("button is clicked");
});
</script>
</body>
</html>
- Producción:
Con función de limitación: en este código, si un usuario continúa haciendo clic en el botón, cada clic se ejecuta después de 1500 ms, excepto el primero, que se ejecuta tan pronto como el usuario hace clic en el botón.
- Programa:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>
JavaScript | With Throttling
</title>
</head>
<body>
<button id="throttle">Click Me</button>
<script>
const btn=document.querySelector("#throttle");
// Throttling Function
const throttleFunction=(func, delay)=>{
// Previously called time of the function
let prev = 0;
return (...args) => {
// Current called time of the function
let now = new Date().getTime();
// Logging the difference between previously
// called and current called timings
console.log(now-prev, delay);
// If difference is greater than delay call
// the function again.
if(now - prev> delay){
prev = now;
// "..." is the spread operator here
// returning the function with the
// array of arguments
return func(...args);
}
}
}
btn.addEventListener("click", throttleFunction(()=>{
console.log("button is clicked")
}, 1500));
</script>
</body>
</html>
- Producción:
Ventajas de la función de estrangulamiento:
- Previene llamadas frecuentes de la función.
- Hace que el sitio web sea más rápido y controla la velocidad a la que se llama a una función en particular.