I have the following ajax request in my django template:
$('#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
});
The "subject" id is for a select form like this:
<select size="7" class="form-control" id="subjects">
{% for subject in subjects %}
<option>{{ subject }}</option>
{% endfor %}
</select>
So, when a subject is changed, I send an ajax request to the server so that I can get the classes for that subject from the database (as there are thousands of classes). However, this takes ~1 second. If a user simply arrows down my list of subjects, then tens of ajax requests will be fired off in a second, causing a backup and slowing down the data being displayed properly.
I tried aborting all previous ajax requests before sending another one, but the problem is the server will still process these, so it did not fix the problem.
Is there any way to speed this up, and somehow only take 1 second any time a user scrolls down to a subject? Or, is there another method that anyone would recommend?
Follow up question. Another way I just thought of would be to only send the ajax request if an option is selected for longer than 1 second. this would make it take 2 seconds which is fine. Is there a way to do this?
Do something like this 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 code
Answering to your follow up question, here is a jQuery function that allow to delay the callback of an event a given amount of milliseconds:
(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);
You can call it this way in your case:
$('#subjects').delayOnEvent('change', function() {
...
}, 1000); // one second delay