Question

我有一个输入字段。当该字段上有一个密钥时，我发送一个请求。我的问题是当触发另一个keyup事件时，我需要取消所有待处理的请求。我看到了很多答案，但我还没有找到解决方案。

var data = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.whitespace,
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: {
        wildcard: '%QUERY',
        url: $('.typeahead').attr('data-autocomplete-url') + '?term=%QUERY',
        rateLimitBy: 'throttle',
        ajax: {
            async: true,
            dataType: 'json',
            crossDomain: true,
        }
    }

});

$('.typeahead').typeahead({
    hint: true,
    highlight: true,
    minLength: 1
},{
    name: 'company',
    displayKey: 'id',
    limit: Infinity,
    source: data,
    templates: {
        empty: [
            '<div style="margin: 4px 30px 4px 30px;" class="empty-message">',
            '  Aucun résultat trouvé   ',
            '</div>'
        ].join('\n'),
        suggestion: function(data) {
            if(data.id_db == 'more'){
                return '<p style="pointer-events:none">'+ data.text +'</p>';
            }else{
                return '<p>'+ data.text +'</p>';
            }

        }
    }
}).on('typeahead:select', function(ev, data) {
    $('#id_db').val(data.id_db);
    changeCompany($(this));
});

Answer 1

这是我使用的技巧。 clearTimeout取消上一个事件。因此，只有在客户端停止输入400 ms后，才会进行Ajax调用。

（我不知道预先输入，所以请使用它需要的任何事件处理......）

var timer;
$('.typeahead').on('keyup', function(e) {
  clearTimeout(timer);
  timer = setTimeout(function() {
      $.ajax({
        ...
      });
    },
    400   // Guestimate the best value you want, usually I use 300 - 400 ms
  )
});

Answer 2

var cancelprev = null;
$("#typhead").typeahead({
    source: function(query, process) {
        var searchval = $('#searchval').val();
        
        
            if (cancelprev != null) 
           cancelprev.abort();
       
       
        var defered=$.get(requesturl,{data:searchval}).done(function(result){
            process(result.split("\n"));
        });
        
        cancelprev=defered;
    }
    
});

如何取消挂起的ajax请求typeahead.js

2 个答案: