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之前调用另一个resize事件，则超时将重置为另一个额外的100ms并且不会触发。这样只有最后一个resize事件才会触发doResize函数。但请记住，＆＃34;最后一次调整大小事件＆＃34;被认为是一个没有调整大小事件的事件，在100ms之后调用，实际上是对它进行去抖动。

在窗口大小调整结束时调整flexlslider的大小

1 个答案: