2 JavaScript関数の実行を互いに排他的にする方法は？

Question

私はいくつかのオプションを持つ2つの選択要素を持っています。

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

現時点での一つの方法は、私はそれを避けることができるか、私のページは少し遅くなって、他の1がトリガされますか？

Answer 1

私はフラグを使用して、選択時に発生した変更がスクリプトのユーザーのためであることを伝えました。

これを確認してください。

ユーザーが1つを変更すると、セカンドセレクトで何も実行されないため、チェンジチェーンが壊れます。

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

あなたがjsFiddleを投稿することができ、この

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

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>