如何实现输入框内容3秒未变化时调用$.post请求？

你需要用**防抖（Debounce）**逻辑来实现这个需求——每次输入时重置定时器，只有当用户停止输入满3秒后，才执行发送请求的操作。

修改后的代码如下：

$(document).ready(function () {    
  // 声明变量存储定时器ID
  let searchTimer;

  $('#searchBox').on('input', function () {
    var searchContent = $(this).val();

    // 每次输入时清除之前未触发的定时器
    clearTimeout(searchTimer);

    if (searchContent.length == 0) {
      // 原有无关代码保留
    }
    else {    
      // 设置新定时器，3秒后执行请求
      searchTimer = setTimeout(function() {
        $.post('/checkAvailability',
          { domainName: searchContent },
          function (data, status, jqXHR) {
            console.log(status + ' ' + data);
          });
      }, 3000); // 3000毫秒 = 3秒
    }
  });
});

关键逻辑说明： #

• 声明searchTimer变量用于保存定时器ID，确保能在每次输入时精准清除未执行的定时器。
• 每次触发input事件时，先调用clearTimeout(searchTimer)取消之前的计时，避免短时间内多次触发请求。
• 仅当输入内容不为空时，重新设置3秒后执行的定时器，定时器回调中才真正发起$.post请求。

这种方式能有效减少不必要的服务器请求，提升性能。

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