Anfragen Ajax Langsam in Django

Question

Ich habe folgende Ajax-Request in meiner django Vorlage:

$('#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 
}); 

Das "Subjekt" id ist für eine ausgewählte Form wie folgt aus:

<select size="7" class="form-control" id="subjects"> 
    {% for subject in subjects %} 
    <option>{{ subject }}</option> 
    {% endfor %} 
</select> 

Also, wenn ein Thema wird geändert, ich sende eine Ajax-Anfrage an den Server, damit ich die Klassen für dieses Thema aus der Datenbank bekommen kann (da es Tausende von Klassen gibt). Dies dauert jedoch ~ 1 Sekunde. Wenn ein Benutzer einfach meine Themenliste herunterfährt, werden Dutzende von Ajax-Anfragen innerhalb einer Sekunde abgefeuert, was zu einer Sicherung und Verlangsamung der Daten führt, die richtig angezeigt werden.

Ich habe versucht, alle vorherigen AJAX-Anfragen abzubrechen, bevor ich eine weitere sendete, aber das Problem ist, dass der Server diese noch verarbeitet, so dass das Problem nicht behoben wurde.

Gibt es eine Möglichkeit, dies zu beschleunigen, und irgendwie nur 1 Sekunde dauern, wenn ein Benutzer zu einem Thema scrollt? Oder gibt es eine andere Methode, die jemand empfehlen würde?

Folgefrage. Ein anderer Weg, an den ich gerade gedacht habe, wäre, die Ajax-Anfrage nur zu senden, wenn eine Option länger als 1 Sekunde gewählt wird. Dies würde es 2 Sekunden dauern, was in Ordnung ist. Gibt es eine Möglichkeit, dies zu tun?

Answer 1

auf Ihre Folge Beantwortung Frage, hier ist ein jQuery-Funktion, die ermöglichen, den Rückruf eines Ereignisses eine bestimmte Menge von Millisekunden zu verzögern:

(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); 

Sie können es in Ihrem Fall so nennen:

$('#subjects').delayOnEvent('change', function() { 
    ... 
    }, 1000); // one second delay 

Answer 2

etwas gefällt das 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