Блог

Главная - Вопросы по программированию - Нежелательная задержка на 1 секунду после события щелчка с помощью javascript

Нежелательная задержка на 1 секунду после события щелчка с помощью javascript

#javascript #checkbox #toggle #lag

#javascript #флажок #переключить #задержка

Вопрос:

У меня есть код javascript, который переключается с переключателя 1 на переключатель 2, когда пользователь нажимает в любом месте на поле. Это работает, но только после задержки в 1 секунду или около того. Таких полей будет сотня, так что это отставание действительно убивает пользовательский интерфейс. Есть какие-либо подсказки, откуда берется это отставание?

Примечание: если я удалю цикл и нацелю элементы на их уникальные идентификаторы вместо того, чтобы перебирать «все элементы с классом x», задержка исчезнет. Но мне нужен цикл, учитывая, что таких полей будет сотня…

Вот javascript:

 $('.checkbox-oui-non').click(function(evt) {
    var a = document.querySelectorAll(".checkbox-oui-non");
    var b = document.querySelectorAll(".checkbox-oui-non .oui");
    var c = document.querySelectorAll(".checkbox-oui-non .non");
    
    for (i = 0; i < a.length; i  ) {
        if (b[i].checked ||
        c[i].checked) {
            if (b[i].checked) {
                b[i].checked = false; 
                c[i].checked = true;
            }
            else if (c[i].checked){
                b[i].checked = true; 
                c[i].checked = false;
                }
        } else {    
            b[i].checked = true;
        }
    }
});

и html:

 <div class="checkbox-oui-non">
    <span>L'enfant est né d'une précédente union</span>
    <div class="oui-non-toggle-wrapper">
        <div class="checkbox">
            <input type="radio" id="moi_oui" name="moi" class="oui">
            <label for="moi_oui">oui</label>
        </div>
        <div class="checkbox">
            <input type="radio" name="moi" id="moi_non" class="non">
            <label for="moi_non">non</label>
        </div>
        <div class="oui-non-toggle"></div>
    </div><!-- end of oui-non-wrapper -->
</div><!-- end of checkbox-oui-non -->

Большое спасибо за вашу помощь!

Комментарии:

1. Переключайте только тот, который был нажат. Прямо сейчас, каждый раз, когда вы нажимаете на любой из них, он переключает их все. Вы уже передаете evt функцию, используйте ее.

2. На самом деле вы можете сделать это вообще без цикла. Вы можете установить идентификатор для вопроса, а затем установить прослушиватель событий щелчка для каждого флажка через класс. При нажатии флажка вы можете использовать jQuery для получения идентификатора .parent того, что было нажато. Вы можете использовать этот идентификатор и вопрос, на который нажали, для создания объекта JavaScript с парой ключ-значение. Вы даже можете использовать его для создания объекта JSON.

3. Спасибо за ваши ответы! Я попытался применить идею Яакова и упростил код, удалив часть «else if», а также все «checked = false». Теперь задержка исчезает, когда я перехожу с «non» на «oui», отлично. Но задержка остается, когда я иду другим путем. Половина проблемы решена. Я точно не знаю, как использовать «evt», как вы говорите. Также я немного затрудняюсь с тем, как именно реализовать решение Тони. Я немного новичок в javascript.