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

“subject”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

Django中Ajax请求缓慢

2 个答案: