使用window.resize(或其他方法)来激活jquery函数的高效方法,以及

我一直在修补一些关于使gridster.js响应的圆形方法的想法.我在gridster的 github问题中发现了一个代码snippit,并意识到如果我在某个窗口大小调整下运行它并销毁并重新运行gridster我可以得到gridster响应responsivley的效果.让我告诉你我的意思 –

$(window).resize(function(){
            var width = $(window).width();
            var columns = "";

            if(Modernizr.mq('screen and (max-width:640px)')){
                columns = 1;
                gridster.destroy();
                var tooFar = $('.gridster .gs-w').filter(function () {
                  return $(this).data('col') > columns;
                });
                $(tooFar).each(function () {
                  $(this).attr('data-col','1');    
                });

                var tooBig = $('.gridster li').filter(function () {
                  return $(this).data('sizex') > columns;
                });
                $(tooBig).each(function () {
                  $(this).attr('data-sizex',columns);

                });
                $(".gridster ul").gridster({
                    widget_base_dimensions: [300,300],widget_margins: [5,5],max_cols: 1,resize: {
                          enabled: true
                        },draggable: {
                          handle: '.dragDiv'
                        },serialize_params: function ($w,wgd) {              
                        return {
                            /* add element ID to data*/
                            id: $w.attr('id'),/* defaults */
                            col: wgd.col,row: wgd.row,size_x: wgd.size_x,size_y: wgd.size_y,/* htmlContent: $($w).html() */
                        }
                    }
        }).data('gridster');
            }

        });

因此,当gridster应该分成1列(它的基数为4)时,它会破坏并重新运行1列.这种方法效果出奇的好,问题在于这不是实现这一目标的好方法.我也没有显示所有断点(它根据窗口大小分为3-2 -1列).它运行得非常差,因为它在每个窗口上的调整都会调整大小,我想知道是否有更简洁的方法来执行此操作,其中函数只会在它们达到窗口大小时触发一次.

另外 – 这只是为了减小gricter的大小,所以如果你的大小不会扩展,我还没有尝试构建这些功能.

任何使用可能不会监听窗口重新大小的每个实例的指针或建议都会非常有用.

谢谢！！

var resizeTimeout;
$(window).resize(function(){
  if(!!resizeTimeout){ clearTimeout(resizeTimeout); }
  resizeTimeout = setTimeout(function(){
    //do gridster re-run here
  },200);
});

(function($){
    $.fn.onDelayed = function(eventName,delayInMs,callback){
        var _timeout;
        this.on(eventName,function(e){
          if(!!_timeout){ 
              clearTimeout(_timeout); 
              console.log('timer being re-set: ' + eventName);
          } else {
              console.log('timer being set for the first time: ' + eventName);
          }
          _timeout = setTimeout(function(){
              callback(e);
          },delayInMs);
        });
    };
})(jQuery);

$(function(){
    $(document).onDelayed('click',500,function(){
        alert('clicking is done');
    });
    $(window).onDelayed('resize',1000,function(){
        alert('resize is finished');
    });
});