如何批量执行jQuery input事件回调以解决性能卡顿问题？

这个问题我之前也碰到过——40个独立的input事件回调同时执行，每个都要做带缓动的DOM显示/隐藏操作，浏览器主线程根本忙不过来，自然会出现明显卡顿。给你几个按优先级排序的实用解决方案，都是实战中验证有效的：

1. 最优解：合并所有回调逻辑，只绑定一个input事件 #

你现在的40个回调逻辑几乎完全一致：判断某个searchable字符串是否包含输入值，然后控制对应template的显示/隐藏。完全没必要绑定40个独立的input事件，把所有需要处理的模板和对应的搜索关键词整合到一个数组里，用一个回调统一处理：

// 第一步：提前把所有模板、搜索字符串、缓动时间存成数组（初始化时执行一次即可）
const templateHandlers = [];
// 替换成你实际的模板生成逻辑，比如循环创建40个项
for (let i = 0; i < 40; i++) {
  const sName = /* 你的sName变量值 */;
  const sCode = /* 你的sCode变量值 */;
  const hProp = /* 你的hProp变量值 */;
  const com = /* 你的com变量值 */;
  const om = /* 你的om变量值 */;
  const template = /* 对应的jQuery模板对象 */;
  const easingTime = Math.floor(Math.random() * (1300 - 300 + 1)) + 300;
  
  templateHandlers.push({
    template: template,
    searchable: (sName + sCode + hProp + com + om).toUpperCase(),
    easingTime: easingTime
  });
}

// 第二步：只绑定一个input事件回调
$('#liveSearch').on('input', function(e) {
  const val = $(this).val().toUpperCase();
  
  // 遍历所有模板处理逻辑
  templateHandlers.forEach(handler => {
    const shouldShow = handler.searchable.indexOf(val) >= 0;
    if (shouldShow) {
      handler.template.show(handler.easingTime, 'swing');
    } else {
      handler.template.hide(handler.easingTime, 'swing');
    }
  });
});

这样做的核心好处是：减少了39次事件绑定的额外开销，所有逻辑在一个回调里执行，浏览器只需要处理一次input事件触发，而不是40次重复触发。

2. 进一步优化：防抖+分批次执行 #

如果合并后仍有卡顿（毕竟40个DOM动画还是不小的工作量），可以再加两个关键优化：

• 防抖：避免用户输入过程中频繁触发逻辑，只在用户停止输入100-200ms后执行
• 分批次处理：把40个模板分成小批次，利用浏览器空闲时间执行，避免主线程被长时间阻塞

let debounceTimer;

// 分批次处理模板的函数
function processTemplateBatch(val, handlers, startIndex = 0, batchSize = 10) {
  const endIndex = Math.min(startIndex + batchSize, handlers.length);
  
  // 处理当前批次的模板
  for (let i = startIndex; i < endIndex; i++) {
    const handler = handlers[i];
    const shouldShow = handler.searchable.indexOf(val) >= 0;
    if (shouldShow) {
      handler.template.show(handler.easingTime, 'swing');
    } else {
      handler.template.hide(handler.easingTime, 'swing');
    }
  }
  
  // 如果还有未处理的模板，利用浏览器空闲时间处理下一批
  if (endIndex < handlers.length) {
    // 优先用requestIdleCallback（浏览器原生API，利用空闲时间），兼容旧浏览器可换成setTimeout
    if ('requestIdleCallback' in window) {
      requestIdleCallback(() => {
        processTemplateBatch(val, handlers, endIndex, batchSize);
      });
    } else {
      setTimeout(() => {
        processTemplateBatch(val, handlers, endIndex, batchSize);
      }, 0);
    }
  }
}

// 带防抖的input事件绑定
$('#liveSearch').on('input', function(e) {
  clearTimeout(debounceTimer);
  const val = $(this).val().toUpperCase();
  
  debounceTimer = setTimeout(() => {
    processTemplateBatch(val, templateHandlers);
  }, 150); // 150ms防抖时长，可根据需求调整
});

3. 额外小优化：缓存静态数据 #

如果你的sName/sCode等数据不会动态变化，提前把searchable字符串计算好并缓存（就像上面代码里那样），避免每次input事件触发时都重新拼接计算，能节省少量性能开销。

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