Эффективный способ использования window.resize (или другого метода) для запуска функций jquery и создания отклика gridster.js

Я поразмышлял над некоторыми обходными способами сделать 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');
            }

        });

Поэтому, когда гридстер должен разбиться на 1 столбец (у него основание равно 4), он уничтожает и повторно запускается с 1 столбцом. Это работает на удивление хорошо, проблема в том, что это не самый лучший способ добиться этого. Я также не показываю все точки останова (он разбивается на столбцы 3-2-1 в зависимости от размера окна). Он работает очень плохо, потому что срабатывает при каждом изменении размера окна, и мне интересно, есть ли более чистый способ сделать это, когда функции будут срабатывать только один раз, когда они достигают размера окна.

Кроме того, это только для уменьшения размера gridster вниз, поэтому, если вы уменьшите размер, он не будет расширяться, я еще не пробовал создавать эти функции.

Любые указатели или предложения по использованию чего-то, что, возможно, не слушает каждый отдельный экземпляр изменения размера окна, были бы очень полезны.

Спасибо!!


jquery responsive-design performance gridster
person ajmajmajma    schedule 27.06.2014    source источник
comment
Пожалуйста, отметьте ответ как принятый   -  person frezq    schedule 17.05.2017

Ответы (1)


arrow_upward
16
arrow_downward

Из вашего вопроса я понял, что gridster постоянно перезапускается, когда пользователь изменяет размер окна; то есть, если вы изменяете размер окна, медленно перетаскивая окно, пиксель за пикселем, сетка запускается повторно для каждого изменения пикселя.

Попробуйте ограничить событие resize с помощью setTimeout. Когда срабатывает resize, вы устанавливаете таймер для повторного запуска gridster — скажем, продолжительность таймера составляет 200 мс. Если в течение этих 200 мс срабатывает еще один resize, вы сбрасываете таймер. При таком подходе повторный запуск происходит только тогда, когда пользователь завершил изменение размера (по крайней мере, на данный момент). Вы можете настроить продолжительность таймера для лучшего опыта.

Пытаться:

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

пример скрипта (посмотрите на консоль, когда вы медленно изменяете размер окна)

РЕДАКТИРОВАТЬ: Для всех, кто интересуется этим шаблоном, я извлек логику регулирования из приведенного выше кода и поместил ее в плагин 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

person Jonathan Wilson    schedule 27.06.2014
comment
Пожалуйста! Я полностью ответил на ваш вопрос, или я что-то не так понял? - person Jonathan Wilson; 30.06.2014
comment
Пол Айриш использует функцию подавления дребезга аналогичным образом: -smartresize-jquery-обработчик событий - person ericslaw; 26.03.2015
comment
Для пояснения, этот паттерн называется устранением дребезга. Шаблон регулирования разрешает вызовы между началом и концом действия, но только один раз за определенный период времени. Debouncing выполняет функцию только через определенное время после последнего вызова функции. - person shamsup; 10.06.2017