Question

我有两个具有多个选项的选择元素，我将它们链接在一起，以便每个元素在另一个更改时自动更新。

// ########### Linked Labour Select Boxes
$('body').on('change', '#labourList > li .labourerID', function() {
    var id = $(this).val();
    $(this).parent().find('.labourerName').val(id).change();
});


$('body').on('change', '#labourList > li .labourerName', function() {
    var id = $(this).val();
    $(this).parent().find('.labourerID').val(id).change();
});

目前有一种方法会触发另一种方法使我的页面变慢，我该怎样避免这种情况？

Answer 1

我使用了一个标志来表示select上发生的更改是因为脚本的用户。

检查一下。

当用户更改一个时，选择在第二个选择中不执行任何操作，以便更改链断开。

var script_triggred_change = false;

$("#one").change(function() {
  console.log("Called One");
  if (script_triggred_change) return;
  script_triggred_change = true;
  $("#two").val($("#one").val()).change();
  script_triggred_change = false;
});

$("#two").change(function() {
  console.log("Called Two");
  if (script_triggred_change) return;
  script_triggred_change = true;
  $("#one").val($("#two").val()).change();
  script_triggred_change = false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="one">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>
<select id="two">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

Answer 2

试试这个

commons-lang

var once = false;
$('select').on('change', function(e) {
  if(once) { 
    once = false;
    return;
  }
  
  once = true;
  $('select').not(this).val($(this).val()).change();	  
});

select, option {
  padding: 5px;
}

如何使2个JavaScript函数的执行互斥？

2 个答案: