$ (window) .resize переходит в бесконечный цикл

Question

Если кто-то сможет найти проблему, это мне очень поможет!

Я создал сценарий, который показывает баннер вверху страницы, только если ширина windows равна меньше или равно 600 пикселей, и если прокрутка находится на расстоянии менее 34 пикселей от верха, затем скройте его, если пользователь прокручивает более 34 пикселей сверху или если ширина окна составляет более 600 пикселей.

Работает хорошо но затем я попытался сделать то же самое, если пользователь изменяет размер окна, и возникают проблемы. Когда я добавляю код для этого, баннер отображается, даже если размер окна увеличен до более 600 пикселей, а баннер отображается / скрыт / показан / скрыт / et c. несколько раз подряд.

Вот мой сценарий:

$(document).ready(function() {
            checkWidth();
        });
        var resizeId;
        $(window).resize(function() {
            clearTimeout(resizeId);
            resizeId = setTimeout(checkWidth, 500);
         });

        function checkWidth(){
            if(window.innerWidth <= 600){
                var scrolled = false;
                $(window).scroll(function() {
                    if ($(window).scrollTop() > 34 && scrolled == false) {
                        $("#balancemtop").slideToggle("slow");
                        scrolled = true;
                    } else if ($(window).scrollTop() < 34 && scrolled == true) {
                        scrolled = false;
                        $("#balancemtop").slideToggle("slow");
                    }
                });
            } else {
                $("#balancemtop").css("display", "none");
                }
            };

Есть идеи?

Заранее спасибо за любую помощь!

Answer 1

Я бы разделил это так:

function checkWidth(){
    if(window.innerWidth <= 600){
        var scrolled = false; 
        if ($(window).scrollTop() > 34 && scrolled == false) {
            $("#balancemtop").slideToggle("slow");
            scrolled = true;
        } else if ($(window).scrollTop() < 34 && scrolled == true) {
            scrolled = false;
            $("#balancemtop").slideToggle("slow");
        }
    } else {
        $("#balancemtop").css("display", "none");
    }
};

$(window).scroll(function() {
    checkWidth();
});

Функция checkWidth () делает то же самое, но не назначает обработчик события окну. Вместо этого вы выполняете одно присвоение вне функции checkWidth () для $(window).scroll.

Answer 2

Попробуйте принять этот вызов $(window).scroll(function() {... за пределами вашей функции checkWidth. Поскольку этот вызов назначает обработчик событий, каждый раз, когда вы вызываете checkWidth, вы добавляете еще один обработчик событий. Это не заменяет предыдущий дескриптор события, а скорее складывается поверх него, так что после нескольких прокруток вы застряли с тонной копий одного и того же обработчика событий. В конце концов, если вы прокрутите достаточно, ваша страница перестанет отвечать.