如何解决select2双向联动时select事件重复触发形成死循环的问题

问题场景 #

页面中存在两个select2下拉字段：客户编码、客户名称，已实现双向联动逻辑：选中客户编码后自动填充对应客户名称，选中客户名称后自动填充对应客户编码。
当前存在死循环问题：修改任意一个字段填充另一个字段时，被填充字段的select2:select事件会被触发，反向修改原字段，导致两个字段的事件反复触发无法停止。

原有实现代码 #

JavaScript逻辑 #

$('body').on('select2:select', '.select-customer-code', function (e) {
    var data = e.params.data;
    var customer_code = data.id;
    var parent = $(this);
    /** Load Ajax */
    ajax_loader(baseUrl + 'merchandiser/inventory/manual/customer/info/fetch', {
        customer_code: customer_code
    }).done(function (response) {
        var response = $.parseJSON(response);
        var el = parent.parent().parent('tr').find('.select-customer-name');
        /** Load select2 */
        select2_loader_plain(el, customer_name_url);
        el.select2('trigger', 'select', {
            data: {
                id: response.customer_code,
                text: response.customer_name
            }
        });
    });
});

$('body').on('select2:select', '.select-customer-name', function (e) {
    var data = e.params.data;
    var parent = $(this);
    var el = parent.parent().parent('tr').find('.select-customer-code');
    el.select2('trigger', 'select', {
        data: {
            id: data.id,
            text: data.id
        }
    });
});

页面HTML结构 #

<table width="100%" class="table table-condensed">
  <thead>
    <tr>
      <th><input type="checkbox"></th>
      <th>#</th>
      <th>Customer Code</th>
      <th>Customer Name</th>
      <th>Inventory Date</th>
      <th>Material Code</th>
      <th>Material Description</th>
      <th>UOM</th>
      <th>QTY</th>
      <th>Batch</th>
      <th>Reported By</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox"></td>
      <td>1</td>
      <td><select class="form-control form-select select-customer-code"></select></td>
      <td><select class="form-control form-select select-customer-name"></select></td>
      <td><input type="text" class="form-control"></td>
      <td><input type="text" class="form-control"></td>
      <td><input type="text" class="form-control"></td>
      <td>
        <select name="" id="" class="form-control">
          <option value=""></option>
        </select>
      </td>
      <td><input type="text" class="form-control"></td>
      <td><input type="text" class="form-control"></td>
      <td><input type="text" class="form-control"></td>
    </tr>
    <tr>
      <td><input type="checkbox"></td>
      <td>2</td>
      <td><select class="form-control form-select select-customer-code"></select></td>
      <td><select class="form-control form-select select-customer-name"></select></td>
      <td><input type="text" class="form-control"></td>
      <td><input type="text" class="form-control"></td>
      <td><input type="text" class="form-control"></td>
      <td>
        <select name="" id="" class="form-control">
          <option value=""></option>
        </select>
      </td>
      <td><input type="text" class="form-control"></td>
      <td><input type="text" class="form-control"></td>
      <td><input type="text" class="form-control"></td>
    </tr>
  </tbody>
</table>

解决方案 #

通过加锁逻辑避免循环触发：新增一个全局锁变量，当通过代码触发select事件时先加锁，事件处理函数检测到锁生效时不执行联动逻辑，延迟一定时间后自动解锁，接收用户的正常选择操作。
实现代码如下：

var code_lock = false;
$('.select-customer-code').on('select2:select', function (e) {
    var data = e.params.data;
    var customer_code = data.id;
    var customer_name = $('.select-customer-name');
    if (!code_lock) {
        /** Load Ajax */
        ajax_loader(baseUrl + 'merchandiser/inventory/manual/customer/info/fetch', {
            customer_code: customer_code
        }).done(function (response) {
            var response = $.parseJSON(response);
            customer_name.select2('trigger', 'select', {
                data: {
                    id: response.customer_code,
                    text: response.customer_name
                }
            });
        });
    }
});

$('.select-customer-name').on('select2:select', function (e) {
    var data = e.params.data;
    var parent = $(this);
    var customer_code = $('.select-customer-code');
    customer_code.select2('trigger', 'select', {
        data: {
            id: data.id,
            text: data.id
        }
    });
    code_lock = true;
    setTimeout(function () {
        code_lock = false;
    }, 1000);
});

内容的提问来源于stack exchange，提问作者Dan Angelo Alcanar