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

Question

I have two select elements with several options, I chain them together so that each updates automatically when the other one changes.

// ########### 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();
});

At the moment one method will trigger the other one making my page a bit slow, how can i avoid that?

Answer 1

I have used a flag to communicate that the change that occurred on the select is because of user of the script.

Check this.

When the user changes one select nothing is executed in second select so the change chain is broken.

 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

Try this

 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; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <select class="lab-ids"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> <select class="lab-name"> <option value="1">Peter</option> <option value="2">Hans</option> <option value="3">Fritz</option> <option value="4">Sandra</option> <option value="5">Jessy</option> </select> </div>