Tengo la siguiente solicitud de ajax en mi plantilla de django:
$('#subjects').on('change', function() { var subject = $('#subjects').find(":selected").text(); $.ajax({ type: "GET", url: "/classes/" + term + "/" + subject , // or just url: "/my-url/path/" dataType: "html", success: function(data) { $('#classes').html(data); } }); //remove courses //remove overview //get courses for specified subject //put them under course });La identificación del "asunto" es para un formulario de selección como este:
<select size="7" class="form-control" id="subjects"> {% for subject in subjects %} <option>{{ subject }}</option> {% endfor %} </select>Entonces, cuando se cambia un tema, envío una solicitud ajax al servidor para que pueda obtener las clases para ese tema de la base de datos (ya que hay miles de clases). Sin embargo, esto toma ~1 segundo. Si un usuario simplemente apunta hacia abajo en mi lista de temas, entonces se dispararán decenas de solicitudes ajax en un segundo, lo que provocará una copia de seguridad y ralentizará la visualización adecuada de los datos.
Intenté abortar todas las solicitudes anteriores de ajax antes de enviar otra, pero el problema es que el servidor aún las procesará, por lo que no solucionó el problema.
¿Hay alguna forma de acelerar esto, y de alguna manera solo tomar 1 segundo cada vez que un usuario se desplaza hacia abajo a un tema? O, ¿hay otro método que alguien recomendaría?
Siguiente pregunta. Otra forma en la que acabo de pensar sería enviar solo la solicitud ajax si se selecciona una opción durante más de 1 segundo. esto haría que tomara 2 segundos, lo cual está bien. ¿Hay alguna forma de hacer esto?
Haz algo como esto enable/disable
$('#subjects').on('change', function() { var subject = $('#subjects').find(":selected").text(); document.getElementById('subjects').disabled=true $.ajax({ type: "GET", url: "/classes/" + term + "/" + subject , // or just url: "/my-url/path/" dataType: "html", success: function(data) { $('#classes').html(data); document.getElementById('subjects').disabled=false } }); #rest of codeRespondiendo a su pregunta de seguimiento, aquí hay una función jQuery que permite retrasar la devolución de llamada de un evento una cantidad determinada de milisegundos:
(function ($) { $.fn.delayOnEvent = function(onevent, callback, ms){ $(this).on(onevent, function( event ){ var srcEl = event.currentTarget; if( srcEl.delayTimer ) clearTimeout ( srcEl.delayTimer ); srcEl.delayTimer = setTimeout(function(){ callback( $(srcEl) ); }, ms); }); return $(this); }; })(jQuery);Puedes llamarlo así en tu caso:
$('#subjects').delayOnEvent('change', function() { ... }, 1000); // one second delay