在调整窗口大小后调整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后没有调用大小调整事件，实际上是将其删除。