有效的使用窗口的方式.Resize(或其他方法)来触发jquery函数，并使gridster.js响应

Question

我一直在思考如何让gridster.js响应。我在github问题中找到了gridster的代码片段，并意识到如果我在一定的窗口大小下运行它并销毁和重新运行gridster，我可以得到gridster响应的效果。让我告诉你我的意思-

$(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列)。它运行得很差，因为它在每次窗口调整大小时都会触发，我想知道是否有一种更干净的方法来做到这一点，当它们达到窗口大小时，函数只会触发一次。

也-这只是对网格缩小，所以如果你缩小它将不会扩展，我还没有尝试构建这些函数。

使用一些可能不监听每个窗口重新大小实例的东西的任何指针或建议将非常有帮助。

谢谢! !

Answer 1

我从你的问题中收集到，当用户调整窗口大小时，gridster正在不断重新运行;也就是说，如果你通过缓慢地拖动窗口来调整窗口的大小，逐像素，每改变一个像素，都会重新运行一个网格。

尝试用setTimeout来限制resize事件。当resize着火时，你设置一个计时器来重新运行栅格—假设计时器持续时间为200ms。如果在这200ms内，另一个resize触发，则重置计时器。使用这种方法，只有当用户完成调整大小时才会重新运行(至少目前是这样)。你可以调整计时器的持续时间以获得更好的体验。

试题:

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

示例fiddle(当您慢慢调整窗口大小时查看控制台)

---

编辑:对于任何对这种模式感兴趣的人，我已经从上面的代码中提取了节流逻辑，并将其放入一个jQuery插件中:

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

使用onDelayed