Question

I am using the popular jquery plugin Masonry to fit my columns nicely in my layout. I am using a setInterval to solve the exact same problem as BoltHead had here: JQuery, setTimeout not working

The solution is to use setTimeout to update the masonry plugin every second like this:

$(function() {
  setInterval(update, 500);
});

    function update() {
        var $container = $('#packages');
        $container.imagesLoaded(function(){
          $container.masonry({
            itemSelector : '.mainPackage',
            columnWidth : 316,
            singleMode: true,
            gutterWidth: 15
          });
        });
    }

Is this a bad idea as far as browser performance? I would think that jquery running this rather hefty function every second would slow things down. Is this a bad practice? The reason I am doing this is because I am using .slideToggle to slidedown more content, thereby needed masonry to readjust the layout. Any thoughts on this solution?

Answer 1

slideToggle receives callback as second argument, so update your plugin there, something like this:

slideToggle(time, function(){
    update(); // this is your "update" function from question example
});

and yes, it is a bad idea to do that update periodically for no reason.