Algunas funciones de Javascript para eventos

Aún recuerdo los tiempos que con Javascript necesitabas una función simple para casi todos los navegadores, implementaban funciones de manera diferente o falta de soporte de características (addEventListener y attachEvent). Por suerte los tiempos han cambiado, pero todavía algunas funciones debemos tenerlas a nuestro arsenal.

debounce()

La función debounce “rebote” nos da la posibilidad de poner un retardo en finalizar un evento, algunos eventos como (scroll,resize,key) para que sean más eficiente debemos esperar que termine la acción y no lanzar el código en cada cambio del propio evento, así se evita la sobrecarga de CPU.

function debounce(func, wait, immediate) { var timeout; return function() { var context = this, args = arguments; var later = function() { timeout = null; if (!immediate) func.apply(context, args); }; var callNow = immediate && !timeout; clearTimeout(timeout); timeout = setTimeout(later, wait); if (callNow) func.apply(context, args); }; };

Como usar la función debounce

var myEfficientFn = debounce(function() { // código a ejecutar despues de 250 milisegundos }, 250); window.addEventListener('resize', myEfficientFn);

poll()

Si carecemos de un evento o bien la versión de Javascript no la soporta, podemos usar la función poll para analizar y comprobar un estado, en intervalos y durante un cierto tiempo, perfecto para simular un evento que no existe.

function poll(fn, callback, errback, timeout, interval) { var endTime = Number(new Date()) + (timeout || 2000); interval = interval || 100;   (function p() { // If the condition is met, we're done! if(fn()) { callback(); } // If the condition isn't met but the timeout hasn't elapsed, go again else if (Number(new Date()) < endTime) { setTimeout(p, interval); } // Didn't match and too much time, reject! else { errback(new Error('timed out for ' + fn + ': ' + arguments)); } })(); }

Como usar la función poll

poll( function() { return document.getElementById('lightbox').offsetWidth > 0; }, function() { // Done, success callback }, function() { // Error, failure callback } );

once()

Hay veces que se necesita lanzar una funcionalidad solo una vez, es decir que ocurre solo una vez en todo el proceso, como la función carga del mismo DOM de javascript. Con esta función podemos establecer esa funcionalidad

function once(fn, context) { var result;   return function() { if(fn) { result = fn.apply(context || this, arguments); fn = null; }   return result; }; }

Como usar la función once

var canOnlyFireOnce = once(function() { console.log('Fired!'); });   canOnlyFireOnce(); // "Fired!" canOnlyFireOnce(); // nada

Fuente: Blog de Davidwalsh

SHARE