javascript - 如何延迟发送 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);
});