Изменить размер flexlslider в конце изменения размера окна

Как вы, возможно, знаете, если поместить какой-либо код в window.resize, он будет выполняться для каждого пикселя, на который пользователь перемещает окно, в основном много вызовов.

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

$( window ).resize(function() {
      var slider1 = $('#slider1').data('flexslider');
      slider1.resize();

});

Функция устранения подчеркивания хорошо работает для определения конца изменения размера, но не работает с flexslider.

http://davidwalsh.name/function-debounce

 $(window).resize(_.debounce(function(){

      console.log('resizing');
      var slider1 = $('#slider1').data('flexslider');
      slider1.resize();

 }, 500));

Я вижу в консоли, что он все еще вызывается сотни раз из-за slider.resize ();

По сути, есть ли способ определить конец изменения размера окна, а затем вызвать flexslider?


jquery resize flexslider
person user2760338    schedule 15.06.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я не знаком с функцией debounce, но вы можете легко сделать это вручную, и вы сможете настроить поведение

 function doResize(){
    console.log('ended resizing');
    var slider1 = $('#slider1').data('flexslider');
    slider1.resize();
 }

 var timeout;

 $(window).resize(function(){
    console.log('resizing');
    clearTimeout(timeout);
    timeout = setTimeout(doResize, 100); // tweak this delay to best suit your needs
 }, 500));

Что это значит, так это то, что он очищает и устанавливает тайм-аут 100 мс при каждом событии изменения размера. Если другое событие изменения размера вызывается до 100 мс, тайм-аут сбрасывается на другие дополнительные 100 мс и не срабатывает. Таким образом, только последнее событие изменения размера вызовет функцию doResize. Но имейте в виду, что «последним событием изменения размера» считается событие, у которого нет событий изменения размера, вызываемых через 100 мс, что фактически отменяет его.

person Juank    schedule 15.06.2015