Привязка к размеру окна, вызывающая цикл при вызове изменения размера на flexslider

Question

Работа на сайте использует плагин flexslider.

Я хочу определить размер браузера, а затем снова запустить слайдер, чтобы он мог регулировать размер/другие аргументы.

Чтобы сделать это, я нашел:

var slider = $('.flexslider').data('flexslider'); 
slider.resize(); 

Который работает, но я теперь создал функцию для вызова этого и использовал его с безвыходным на окно изменения размера:

$(window).bind('resize', function() { 
    console.log('window resized'); 
    resizeSlider(); 
}); 

// resize the slider 
function resizeSlider() 
{ 
    var slider = $('.flexslider').data('flexslider'); 
    slider.resize(); 
    console.log('slider-resized'); 
} 

проблема в том, что когда я изменяю размер браузера, я получаю постоянный поток журналов с измененным браузером, а затем стек из 600 до:

Uncaught RangeError: Maximum call stack size exceeded 

Как я могу это исправить?

Answer 1

Похоже, что есть основная проблема, о которой мы ничего не знаем. Возможно, событие изменения размера окна запускается где-то еще?

Вот небольшая функция, которую я использую во многих проектах, помогает мне каждый раз.

/** 
    * @description delay events with the same id, good for window resize events, keystroke, etc ... 
    * @param {Function} func : callback function to be run when done 
    * @param {Integer} wait : integer in milliseconds 
    * @param {String} id : unique event id 
    */ 
var delayedEvent = (function() { 
    var timers = {}; 

    return function (func, wait, id) { 
     wait = wait || 200; 
     id = id || 'anonymous'; 
     if (timers[id]) { 
      clearTimeout(timers[id]); 
     } 

     timers[id] = setTimeout(func, wait); 
    }; 
})(); 

Чтобы применить к функции изменения размера, просто обернуть его вокруг:

function resizeSlider() { 
    delayedEvent(function() { 
     var slider = $('.flexslider').data('flexslider'); 
     slider.resize(); 
     console.log('slider-resized'); 
    }, 200, 'flexslider-resize'); 
} 

Теперь всякий раз, когда resizeSlider() называется, вы будете выполнить функцию каждые 200 мс. Это должно предотвратить ошибку диапазона.

Чтобы проверить основные проблемы, используйте его в $(window).bind('resize'). Теперь я замечаю, вы пробовали $(window).on('resize') или в чем причина для bind здесь? Вы используете более старую версию jQuery?

Также обратите внимание, что $('.flexslider').data('flexslider') вызывается каждый раз. Эта переменная должна быть вне области функции, возможно, в качестве параметра, если она не изменится. => «Делегация» или «лямбда» приходит на ум.

Answer 2

Можете ли вы попробовать сделать this, ваш код имеет очень низкую производительность, так как он называется постоянно, даже если вы немного переместите свое окно. Этот может вызвать вашу ошибку.

Добавить задержку в методе resize, чтобы ваш клиент мог обрабатывать все размеры.

Я не уверен, что это исправит вашу проблему сразу, но очень желательно использовать ее в любом случае, даже если это не решит вашу проблему!