Возникли проблемы с функцией JavaScript onscroll ()

Question

Я пытаюсь создать онлайн-резюме со статической коробкой, содержащей опыт работы.Идея состоит в том, что когда вы прокручиваете вверх или вниз разные компании, их связанная информация исчезает и исчезает.Вот мой JavaScript-код:

var employment_history_display = "Microsoft";
document.getElementById("employment_history_text").onwheel = function () {
    if (event.deltaY < 0) {
        if (employment_history_display == "SoftwareAG") {
            $("#SoftwareAG").animate({ opacity: '0' });
            $("#Microsoft").animate({ opacity: '1' });
            employment_history_display = "Microsoft";
        } else if (employment_history_display == "NAS") {
            $("#NAS").animate({ opacity: '0' });
            $("#SoftwareAG").animate({ opacity: '1' });
            employment_history_display = "SoftwareAG";
        };
    } else if (event.deltaY > 0) {
        if (employment_history_display == "SoftwareAG") {
            $("#SoftwareAG").animate({ opacity: '0' });
            $("#NAS").animate({ opacity: '1' });
            employment_history_display = "NAS";
        } else if (employment_history_display == "Microsoft") {
            $("#Microsoft").animate({ opacity: '0' });
            $("#SoftwareAG").animate({ opacity: '1' });
            employment_history_display = "SoftwareAG";
        };
    };
};

Когда страница загружается, div "Microsoft" виден, а два других прозрачны.Это работает в том, что следующий div исчезает, а последний исчезает.Тем не менее, он быстро прокручивает оба без остановки в середине.Я полагаю, это связано с тем, что onwheel возвращает несколько значений, поэтому функция повторяется несколько раз.Есть ли способ сделать так, чтобы функция, определенная в onwheel, работала только один раз?

Answer 1

Общий способ заставить обработчик останавливаться после выполнения какого-либо произвольного условия - это удалить обработчик события из себя, как только условие выполнено - например, в конце первого выполнения функции, если выхотите, чтобы он выполнялся только один раз, сделайте это: document.getElementById("employment_history_text").onwheel = function () {}