如何避免使用setTimeout时触发多次重复AJAX请求

AI 小北

2026-9-30

解决方案

你当前的问题本质是每次keyup事件都会创建独立的定时器，多个定时器并行计时，到期后都会触发请求，导致重复调用。需要加入防抖逻辑：每次触发输入时先清除上一个未执行的定时器，只有当连续输入停止满500ms后，才发起一次请求。

修复后代码

// 存储定时器标识，用于清除前一次未执行的延时任务
let searchTimer = null;

$(".qs-text").keyup(function() {
  // 每次输入先清空之前的定时器，取消未执行的请求逻辑
  clearTimeout(searchTimer);
  const currentInput = $(this).val();

  if (currentInput.length > 2) {
    // 生成新的定时器，仅当500ms内无新输入时才会执行
    searchTimer = setTimeout(function() {
      // 对请求参数做编码处理，避免特殊字符导致请求异常
      $.get("ajax_request.php?req=Quicksearch&qs=" + encodeURIComponent(currentInput), function(data) {
        $('.qs-hits').text(data);
      });
    }, 500);
  } else {
    $('.qs-hits').text('-');
  }
});