CODEWITHSUNDEEP
javascriptjqueryflexslider
Lovelock
Lovelock

Reputation: 8085

Binding to window resize causing a loop when calling resize on flexslider

Working on a site use the flexslider plugin.

I want to detect a browser resize, and then re initiate the slider so it can adjust size / other args.

To do this, I found:

var slider = $('.flexslider').data('flexslider');
slider.resize();

Which works, but I have now created a function to call this and used it with a bind on the window resize:

$(window).bind('resize', function() {
    console.log('window resized');
    resizeSlider();
});

// resize the slider
function resizeSlider()
{
    var slider = $('.flexslider').data('flexslider');
    slider.resize();
    console.log('slider-resized');
}

The problem is, when I resize the browser I get a constant stream of 'browser resized' logs and then a stack of 600 before:

Uncaught RangeError: Maximum call stack size exceeded

How can I fix this?

Upvotes: 0

Views: 743

Answers (2)

Tim Vermaelen
Tim Vermaelen

Reputation: 7059

Sounds like there is an underlying problem we know nothing about. Perhaps the window resize event is triggered somewhere else?

Here's a small function I use throughout a lot of projects, helps me everytime.

/**
  * @description delay events with the same id, good for window resize events, keystroke, etc ...
  * @param {Function} func : callback function to be run when done
  * @param {Integer} wait : integer in milliseconds
  * @param {String} id : unique event id
  */
var delayedEvent = (function () {
    var timers = {};

    return function (func, wait, id) {
        wait = wait || 200;
        id = id || 'anonymous';
        if (timers[id]) {
            clearTimeout(timers[id]);
        }

        timers[id] = setTimeout(func, wait);
    };
})();

To apply to your resize function, simply wrap it around:

function resizeSlider() {
    delayedEvent(function() {
        var slider = $('.flexslider').data('flexslider');
        slider.resize();
        console.log('slider-resized');
    }, 200, 'flexslider-resize');
}

Now whenever the resizeSlider() is called, you'll execute the function every 200ms. This should prevent the range error.

To check for underlying problems, use it in the $(window).bind('resize'). Now I notice, have you tried $(window).on('resize') or what's the reason for bind here? You use an older jQuery version?

Also note that the $('.flexslider').data('flexslider') is called everytime. This variable should be outside the function scope, as a parameter perhaps, if it doesn't change. => "delegation" or "lambda" comes to mind.

Upvotes: 1

Clemens Himmer
Clemens Himmer

Reputation: 1342

Can you please try doing this, your code has very poor performance, as it is called permanently even if you move your window just a little bit. This might cause your error.

Add a delay in the resize method so your client can handle all the resizes.

I am not sure if this will fix your problem right away, but is very advisable to use it anyways, even if it won't fix your problem!

Upvotes: 0

Related Questions