如何在onchange事件完成后依次触发多数组值的循环执行

你的问题出在for循环是同步执行的，会一次性触发所有change事件，不管前一个事件里的异步操作是否完成，导致多值场景下事件冲突或未正确执行。要实现逐个触发、等待当前事件完成再处理下一个，需要用异步控制逻辑，同时优化DOM操作和事件触发的细节。

关键优化点： #

• 用prop替代attr设置checked状态：jQuery中操作表单元素的状态（如checked），prop比attr更可靠，因为它直接操作DOM元素的属性而非HTML属性。
• 缓存DOM查询结果：避免重复查询相同的DOM元素，提升性能。
• 异步逐个处理：通过递归或async/await实现顺序执行，确保前一个change事件完成后再处理下一个数组元素。
• 正确触发事件：jQuery中触发change事件用trigger('change')而非trigger('onchange')，onchange是元素的属性名，事件名是change。

方案1：递归实现顺序触发 #

function processZip(index) {
  // 递归终止条件：所有元素处理完毕
  if (index >= getzip.length) return;

  const currentZip = getzip[index];
  // 一次性找到对应的行，避免重复查询DOM
  const $targetRow = $('span:contains(' + currentZip + ')').parent().parent();
  const $checkbox = $targetRow.find('td:nth-child(4) > Span > input').not('[disabled="disabled"]');
  const $triggerElement = $targetRow.find('td:nth-child(4) > Span');

  // 设置checkbox选中状态
  $checkbox.prop('checked', true);

  // 触发change事件，并在事件完成后处理下一个元素
  // 注意：如果你的onchange事件包含异步操作（如AJAX），需要在异步操作的回调中调用processZip(index + 1)
  $triggerElement.one('change', function() {
    // 这里可以添加事件完成后的额外逻辑
    processZip(index + 1);
  }).trigger('change');
}

// 启动处理流程
processZip(0);

方案2：用async/await（适合现代浏览器） #

如果你的onchange事件可以包装成Promise，用async/await会更直观：

async function processAllZips() {
  for (let i = 0; i < getzip.length; i++) {
    const currentZip = getzip[i];
    const $targetRow = $('span:contains(' + currentZip + ')').parent().parent();
    const $checkbox = $targetRow.find('td:nth-child(4) > Span > input').not('[disabled="disabled"]');
    const $triggerElement = $targetRow.find('td:nth-child(4) > Span');

    $checkbox.prop('checked', true);

    // 等待change事件完成
    await new Promise(resolve => {
      $triggerElement.one('change', function() {
        // 如果onchange里有异步操作（比如AJAX），要在异步操作完成后再resolve
        // 示例：如果是AJAX请求，就放在$.ajax的complete回调里
        resolve();
      }).trigger('change');
    });
  }
}

// 执行处理
processAllZips();

额外说明 #

如果你的onchange事件绑定在input元素而非span上，需要调整触发事件的目标元素。另外，span:contains()可能会匹配到包含目标文本的其他span，建议给目标span添加特定类名或属性，让选择器更精准，避免误匹配。

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