Jquery cambia con retraso [duplicate]

2 minutos de lectura

avatar de usuario
GoldenNewby

Posible duplicado:

Acelerador de llamadas de eventos en jQuery

Me gusta la funcionalidad .change() de jQuery, pero me gustaría evitar la activación de un montón de solicitudes AJAX cuando un usuario cambia rápidamente las opciones en un menú desplegable de selección. Como ejemplo, cuando un usuario usa la rueda de desplazamiento del mouse, activará cada opción a medida que elija su nueva opción.

Me gustaría pensar en una buena forma limpia de manejar solo el envío de estas actualizaciones una vez que el usuario deja de actualizar el menú desplegable de selección por un segundo.

¿Hay una forma ordenada de manejar esta situación?

  • Lo que buscas se llama despegar.

    – Félix Kling

    24 de febrero de 2012 a las 3:08

La forma típica de hacer esto es con setTimeout y clearTimeout:

var wto;

$('#select').change(function() {
  clearTimeout(wto);
  wto = setTimeout(function() {
    // do stuff when user has been idle for 1 second
  }, 1000);
});

  • ¿Qué significa wto?

    – Gisheri

    14 de agosto de 2015 a las 15:19

  • Window.TimeOut: solo una elección aleatoria, por ejemplo.

    – glorto

    14 de agosto de 2015 a las 15:48

  • Si no desea crear una variable global, puede utilizar .data() para asignar la identificación del intervalo al propio elemento seleccionado. Toma un poco más de código, pero sé que a algunas personas no les gusta crear variables globales.

    – Gavin

    17 de julio de 2017 a las 21:14

  • aquí un ejemplo de lo que comentó @Gavin: stackoverflow.com/a/29417088/2617123

    – epineda

    14 de mayo de 2020 a las 5:12

  • Yo diría que usar un elemento HTML para almacenar el estado de la aplicación tiene más inconvenientes que usar el estado global, pero puede evitar fácilmente el estado global al agrupar su código modularizado con los gustos de webpack.js.org o simplemente envolviendo su código en una función autoejecutable: markdalgleish.com/2011/03/funciones autoejecutables-anónimas

    – glorto

    15 mayo 2020 a las 17:26

avatar de usuario
Aminadav Glickshtein

Te recomiendo que uses underscore.js entonces:

var newFunction=_.debounce(function (){ 
  alert('You function, after use stop scroll')
},1000); //Wait seconds after he stops

$('#select').change(newFunction);

Leer más sobre guión bajo.debounce.

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad