$(window).resize 无限循环

Question

If someone is able to find the issue, that would help me a lot!

I have created a script that shows a banner on the top of a page only if the width of the windows is less or equal than 600px and if the scroll is less than 34px away from the top, then hide it if the user scrolls more than 34px from the top or if the window width makes more than 600px.

It works well but then I have tried to do the same thing if the user resizes the window, and there comes the troubles. When I add the code to do that, the banner is showed even if the window is resized to more than 600px and the banner is showed/hidden/showed/hidden/etc. several times in a row.

Here is my script:

$(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");
                }
            };

Any idea?

Thanks in advance for any help!

Answer 1

Try taking this call $(window).scroll(function() {... outside of your checkWidth function. Since this call is assigning an event handler, every time you call checkWidth, you are adding another event handler. This does not replace the previous event handle,r but rather stacks on top of it so that after scrolling a couple of times, you are stuck with a ton of copies of the same event handler. Eventually, if you scroll enough this will cause your page to become unresponsive.

Answer 2

I would separate it like this:

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

The checkWidth() function does the same, but it doesn't assign the event handler to the window. Instead, you make a single assignment outside of the checkWidth() function for $(window).scroll .