Wie wird die Ausführung von 2 JavaScript-Funktionen gegenseitig ausgeschlossen?

Question

Ich habe zwei Select-Elemente mit mehreren Optionen, ich verkette sie zusammen, so dass jeder automatisch aktualisiert, wenn der andere sich ändert.

Im Moment löst eine Methode aus, die andere macht meine Seite etwas langsam, wie kann ich das vermeiden?

Answer 1

Ich habe ein Flag verwendet, um zu kommunizieren, dass die Änderung, die bei der Auswahl aufgetreten ist, wegen des Benutzers des Skripts ist.

Überprüfen Sie dies.

Wenn der Benutzer eine Auswahl ändert, wird in der zweiten Auswahl nichts ausgeführt, sodass die Änderungskette unterbrochen wird.

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

Versuchen Sie, diese

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>