Textarea retrasa después de registrar eventos `keydown` utilizando Javascript

Question

¿Cómo se puede conectar un montón de código a un evento onkeydown, pero seguir ingresando texto en un textarea rápido y nítido? Algo más que un par de declaraciones IF parece ralentizar considerablemente.

EDITAR: Debo añadir (no puede creer que haya olvidado!) Que esto no afecta a los navegadores de escritorio. Es principalmente un problema con iPhone Safari. Otros navegadores móviles también podrían verse afectados, pero nos estamos centrando en iPhone Safari ya que ejecuta JS de la mejor manera (AFAIK)

Answer 1

Bueno, una forma de hacerlo sería no utilizar onkeydown, sino usar un temporizador. Puede establecer un intervalo ejecutando una función que verifique los contenidos de TextArea y ejecute allí su lógica. Parece que pasaría la mayor parte de la sobrecarga. De todos modos, pruébalo, creo que podría ser útil.

Así es como usted lo utilizaría:

// First param is the function to call, second is 
// time interval in miliseconds 
var timer = setTimeout(checkTextArea(), 5000); 

function checkTextArea() { 
    var text = document.getElementById("textarea").value; 
    // logic... 
    timer = setTimeout(checkTextArea(), 5000); // we loop it back to 
               //the function with the timer 
} 

Answer 2

Teniendo en cuenta tu edición con respecto a este se centra en el acceso iPhone ...

El iPhone realmente no tiene tanto poder a la misma. Pues toma el mejor simplemente usando onchange o onblur en lugar de onkeydown.

---

---

Una alternativa a la respuesta de Dave está a la espera para el usuario para hacer una pausa (por ejemplo, durante 5 segundos):

var textarea = document.getElementById('textarea'); 

function checkTextArea() { 
    if (textarea.value /* ... */) { 
    /* ... */ 
    } 
} 

textarea.keyDownTimeout = null; 
textarea.onkeydown = function() { 
    if (textarea.keyDownTimeout) clearTimeout(textarea.keyDownTimeout); 
    textarea.keyDownTimeout = setTimeout(checkTextArea, 5000); 
}; 

Esto debería ajustar el temporizador con el primer keydown, detener y volver a crear el temporizador para cada keydown sucesivo. Finalmente llama 5 segundos después de que el usuario deja de escribir.

Además, tenga en cuenta la falta de paréntesis después checkTextArea. Esto dará setTimeout la referencia de la función contra su return.

---

También puede configurar esto en una función para que sea más fácil de usar para múltiples elementos:

function setPauseTimer(element, timeout, callback) { 
    var timer = null; 
    element.onkeydown = function() { 
    if (timer) clearTimeout(timer); 
    timer = setTimeout(function(){ callback(element); }, timeout); 
    }; 
} 

function checkTextArea(textarea) { /* moved from global to argument */ 
    if (textarea.value /* ... */) { 
    /* ... */ 
    } 
} 

setPauseTimer(document.getElementById('textarea'), 5000, checkTextArea); 

Answer 3

Tal vez puede publicar "un montón de código" y podríamos discutir si hay alguna refactorización allí (antes de complejizarlo con un temporizador). Parece que podrías saltar a optimizaciones secundarias primero.

Answer 4

había pensado en los métodos de temporizador. Creo que setTnterval sería mejor que setTimeout, pero eso no parece una solución óptima, ¿no?