如何延迟发送ajax请求？

Question

这是我的代码:

$("input").on('keydown', function(){
    $.ajax({
        url :  '/files/tags_autocomplete.php',
        dataType : 'JSON',
        success : function (tags) {
            $("ul").html(tags.output);
        }
    });
});

我的代码在用户输入标签时向用户建议了一些标签(具有匹配的子字符串与用户目前已写入的标签)作为自动完成框.

我的问题是什么？我当前的代码每个keydown发送一个新的ajax请求.例如,如果用户写入something,我的脚本会发送9个ajax请求,这看起来像是一场噩梦.

无论如何,我该怎么处理？我的意思是我需要实现发送延迟吗？像"在插入最后一个字符后1秒才发送请求"之类的东西？或者有更好的主意吗？

Answer 1

您可以创建一个简单的节流机制

$("input").on('keydown', function(){

    clearTimeout( $(this).data('timer'); )

    var timer = setTimeout(function() {
      $.ajax({
          url :  '/files/tags_autocomplete.php',
          dataType : 'JSON',
          success : function (tags) {
              $("ul").html(tags.output);
          }
      });
    }, 500);

    $(this).data('timer', timer);
});