在調整窗口大小後調整flexlslider的大小

Question

正如您可能知道的將任何代碼放在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？

Answer 1

我不熟悉的防抖動功​​能，但你可以很容易地通過手工做到這一點，你就可以調整行爲

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)); 

這裏做的事情是，它會清除和設置的超時每次調整大小事件100ms。如果在100ms之前調用另一個調整大小的事件，超時會重置爲另一個額外的100ms，並且不會觸發。這樣只有最後一個resize事件纔會觸發doResize函數。但請記住，「上次調整大小事件」被認爲是在100ms後沒有調用大小調整事件，實際上是將其刪除。