如何为Keyup AJAX搜索函数添加定时器清除搜索会话

要实现用户停止输入一段时间后自动清除搜索会话，你需要引入一个定时器变量，每次用户输入时重置定时器，只有当用户停止输入达到指定时长后，才触发会话清除逻辑。具体修改如下：

// 声明全局定时器变量，用于跟踪输入超时
let searchTimeout;

if ($('#loaddata').attr("data-id") == '0') {
  $("#HelloWord").on("keyup", function() {
    // 每次输入时先清除之前的定时器，避免重复触发
    clearTimeout(searchTimeout);
    
    var value = $(this).val().toLowerCase();
    
    console.log(value);
    if (value != '') {
      $.ajax({
        type: 'POST',
        url: "<?php echo $siteurl;?>search.php",
        data: {
          valuejj: value,
        },
        success: function(data2) {
          console.log(data2);
          if (data2 == 'dataPushed') {
            queryStringCategory2(pagevalue = 1);
          }
        }
      });

      // 设置定时器：用户停止输入3秒后，自动清除搜索会话
      // 可根据需求调整超时时间（单位：毫秒）
      searchTimeout = setTimeout(function() {
        $.ajax({
          type: 'POST',
          url: "<?php echo $siteurl;?>SearchValueDestroyFromSession.php",
          data: {
            id: 1
          },
          success: function(data2) {
            if (data2 == 'done') {
              queryStringCategory2(pagevalue = 1);
            }
          }
        });
      }, 3000);

    }
    if (value == '') {
      // 手动清空输入时，立即清除会话并重置定时器
      clearTimeout(searchTimeout);
      $.ajax({
        type: 'POST',
        url: "<?php echo $siteurl;?>SearchValueDestroyFromSession.php",
        data: {
          id: 1
        },
        success: function(data2) {
          if (data2 == 'done') {
            queryStringCategory2(pagevalue = 1);
          }
        }
      });
    }
  });
}

关键逻辑说明 #

• 定时器全局管理：在事件外部定义searchTimeout，确保每次输入操作都能访问并重置这个定时器。
• 输入时重置定时器：clearTimeout(searchTimeout)会在用户每一次按键时清除之前未触发的定时器，只有当用户停止输入超过设定时长，定时器才会执行清除逻辑。
• 超时自动清除：用户输入内容后，若3秒内没有新的输入，就会自动调用会话销毁接口并刷新页面内容。
• 手动清空即时响应：保留原有手动清空输入时立即清除会话的逻辑，同时清空定时器避免后续误触发。

内容的提问来源于stack exchange，提问作者mario009