使用jQuery+JsBarcode批量生成表格条形码的技术问题咨询

嘿，我来帮你搞定这个条形码生成的需求，分两部分来拆解——先实现「逐个生成并重置变量+预生成隐藏」，再给你说大量条码时的优化方案~

一、实现逐个生成条码并重置变量，预生成后隐藏 #

首先，咱们要调整逻辑：不再把所有条码塞到一个thecode变量里，而是给表格每行配一个专属的条码容器，遍历每行时单独生成条码到对应容器，生成后就重置临时变量，同时容器默认隐藏，等点击按钮再切换显示。

示例代码 #

HTML结构（先给每行加个条码容器）

<table id="barcodeTable">
  <tr>
    <td>123456</td>
    <td><div class="barcode-container" style="display: none;"></div></td>
  </tr>
  <tr>
    <td>789012</td>
    <td><div class="barcode-container" style="display: none;"></div></td>
  </tr>
  <!-- 更多行... -->
</table>
<button id="toggleBarcodes">显示/隐藏条形码</button>

jQuery + JsBarcode 代码

$(document).ready(function() {
  // 预先生成所有条形码，默认隐藏
  $('#barcodeTable tr').each(function(_, row) {
    const $row = $(row);
    // 获取当前行的条码值
    const barcodeValue = $row.find('td:first').text().trim();
    // 获取当前行的条码容器
    const barcodeContainer = $row.find('.barcode-container')[0];

    // 生成条形码到容器
    JsBarcode(barcodeContainer, barcodeValue, {
      format: "CODE128", // 按需选择条码格式
      width: 2,
      height: 50
    });

    // 重置你的临时变量thecode
    let thecode = ''; // 每次循环后清空，避免变量堆积
  });

  // 点击按钮切换显示/隐藏
  $('#toggleBarcodes').click(function() {
    $('.barcode-container').toggle();
  });
});

这段代码里，每遍历一行就单独处理一个条码，生成后立刻重置thecode，完全符合你「逐个处理+重置变量」的要求，而且所有条码一开始就生成好了，只是隐藏着，点击按钮才会显示。

二、大量条码时的优化方案 #

如果表格有成百上千行，一次性生成所有条码会阻塞浏览器主线程，导致页面卡顿甚至假死，这时候可以试试这些优化手段：

1. 分批生成条码（避免一次性阻塞） #

把条码分成小批量生成，利用浏览器的空闲时间或者间隔执行，比如每次生成20个，完成后再生成下一批：

$(document).ready(function() {
  const rows = $('#barcodeTable tr').toArray();
  const batchSize = 20; // 每批生成20个，可按需调整
  let currentIndex = 0;

  function generateNextBatch() {
    const endIndex = Math.min(currentIndex + batchSize, rows.length);
    // 处理当前批次的行
    for (let i = currentIndex; i < endIndex; i++) {
      const $row = $(rows[i]);
      const barcodeValue = $row.find('td:first').text().trim();
      const barcodeContainer = $row.find('.barcode-container')[0];

      JsBarcode(barcodeContainer, barcodeValue, {
        format: "CODE128",
        width: 2,
        height: 50
      });

      let thecode = ''; // 重置变量
    }
    currentIndex = endIndex;
    // 还有未处理的行，继续下一批
    if (currentIndex < rows.length) {
      // 用requestIdleCallback利用浏览器空闲时间，更友好
      requestIdleCallback(generateNextBatch);
      // 也可以用setTimeout固定间隔执行：setTimeout(generateNextBatch, 50);
    }
  }

  // 启动分批生成
  generateNextBatch();

  // 切换显示逻辑不变
  $('#toggleBarcodes').click(function() {
    $('.barcode-container').toggle();
  });
});

2. 改用Canvas渲染条码 #

JsBarcode默认生成SVG元素，大量SVG会增加DOM节点数量，改用Canvas渲染能减少DOM开销，性能更好：

JsBarcode(barcodeContainer, barcodeValue, {
  format: "CODE128",
  width: 2,
  height: 50,
  renderer: 'canvas' // 开启Canvas渲染
});

3. 缓存DOM元素减少查找开销 #

遍历前先把需要用到的DOM元素缓存起来，避免每次循环都重新查找DOM：

$(document).ready(function() {
  // 提前缓存所有行和容器
  const $rows = $('#barcodeTable tr');
  $rows.each(function() {
    const $row = $(this);
    const $valueTd = $row.find('td:first'); // 缓存条码值所在的td
    const $container = $row.find('.barcode-container'); // 缓存条码容器
    const barcodeValue = $valueTd.text().trim();

    JsBarcode($container[0], barcodeValue, {
      format: "CODE128",
      width: 2,
      height: 50
    });

    let thecode = '';
  });
});

4. 给按钮点击加节流（防止频繁操作DOM） #

如果用户频繁点击「显示/隐藏」按钮，频繁切换DOM状态也会有性能损耗，加个节流限制操作频率：

let isToggling = false;
$('#toggleBarcodes').click(function() {
  if (isToggling) return;
  isToggling = true;
  $('.barcode-container').toggle();
  // 200ms内不允许重复点击
  setTimeout(() => {
    isToggling = false;
  }, 200);
});

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