Django中的Ajax請求緩慢

Question

我的Django模板中有以下ajax請求：

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

“主題” ID用於如下所示的選擇形式：

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

因此，當主題更改時，我向服務器發送了一個ajax請求，以便可以從數據庫中獲取該主題的類（因為有數千個類）。 但是，這大約需要1秒鍾。 如果用戶只是簡單地向下瀏覽我的主題列表，那么數十秒之內的ajax請求將在一秒鍾內觸發，從而導致備份並減慢了正確顯示數據的速度。

我嘗試在發送另一個請求之前中止所有先前的ajax請求，但是問題是服務器仍會處理這些請求，因此它無法解決問題。

有什么方法可以加快速度嗎？無論如何，只要用戶向下滾動到某個主題，它就只花1秒？ 還是有人建議使用另一種方法？

跟進問題。 我剛剛想到的另一種方式是，如果選擇一個選項的時間超過1秒，則僅發送ajax請求。 這將花費2秒，這很好。 有沒有辦法做到這一點？

Answer 1

做這樣的事情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

Answer 2

回答您的后續問題，以下是一個jQuery函數，該函數允許將事件的回調延遲給定的毫秒數：

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

您可以在這種情況下這樣稱呼：

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