jq 输入框防抖示例

在JavaScript中，jq（jQuery）库提供了一种方便的方式来实现输入框的防抖功能。防抖是一种优化性能的技术，它会在用户停止键入一段时间后才触发某个事件，防止因为用户的频繁输入而过度发送请求。

以下是一个简单的jq输入框防抖示例：

$(document).ready(function() {
  var $input = $('#search-input'); // 假设搜索输入框id为'search-input'
  var timeoutId; // 用于存储定时器

  function debounce(func, delay) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(function() {
      func();
    }, delay);
  }

  $input.on('keyup', function(e) { // 当输入框发生keyup事件
    debounce(function() { // 防抖函数，在延迟时间过后执行
      console.log('搜索关键词:', $(this).val()); // 示例操作：获取并打印输入内容
      // 这里可以替换为实际的搜索API调用
    }, 300); // 设置延迟能量300毫秒
  });
});

在这个例子中，当用户在输入框内停止敲击超过300毫秒，`debounce`函数才会执行其内部的回调函数，处理输入内容。这有助于减少不必要的请求次数，提高用户体验。