Question

我写了一些JQuery代码来刷新我在响应性Wordpress主页上使用的FlexSlider实例。由于响应速度快，每次调整浏览器窗口大小时，滑块都需要重置。

我在文档中看到flexslider.resize（）;是重置滑块的内置方法。

例如

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

我实现了$（window）.resize（）方法，最初我看到它每秒触发数百次并导致严重的性能问题，所以我在StackOverflow上找到了一些答案，并最终实现了提供的此功能另一个用户：

var waitForFinalEvent = (function () {
    var timers = {};
    return function (callback, ms, uniqueId) {
      if (!uniqueId) {
        uniqueId = "uniqueIDdefault";
      }
      if (timers[uniqueId]) {
        clearTimeout (timers[uniqueId]);
      }
      timers[uniqueId] = setTimeout(callback, ms);
    };
  })();

此功能似乎有所帮助，因为该事件不再每秒每秒触发数百次。我现在遇到的问题是它似乎正在循环播放。当我运行flexSlider.resize（）时，似乎触发了window.resize（）函数，结果我遇到了无限的调整大小循环。

我可能是错的，但似乎flexslider上的.resize（）函数正与window.resize（）JQuery函数交叉？我对吗？？我如何解决此问题以节省性能。我担心每隔半秒在后台运行无限循环会导致性能问题。有更好的方法吗？

我当前的代码：

$(window).load(function(){

  var waitForFinalEvent = (function () {
    var timers = {};
    return function (callback, ms, uniqueId) {
      if (!uniqueId) {
        uniqueId = "uniqueIDdefault";
      }
      if (timers[uniqueId]) {
        console.log('>> timers[uniqueId] exists ',timers[uniqueId], uniqueId)
        clearTimeout (timers[uniqueId]);
      }
      console.log('>> timers[uniqueId] exists ',timers[uniqueId], uniqueId)
      timers[uniqueId] = setTimeout(callback, ms);
    };
  })();

  $('.flexslider').flexslider({
    animation: "slide",
    itemWidth: 980,
    start: function(slider){
      $('body').removeClass('loading');
    }
  });

  document.getElementById("home-upcoming-featured").style.height = getHalfFeaturedHeight()+"px";  //hide by default

  //When the browser is resized, reset the height of the featured article stack visibility..
  $( window ).resize(function() {
    var headSlider = $('.flexslider').data('flexslider');
    if(!showToggle) {
      document.getElementById("home-upcoming-featured").style.height = getHalfFeaturedHeight()+"px"; 
      //getHalfFeaturedHeight() returns half the height of the content area.
    } else {
      document.getElementById("home-upcoming-featured").style.height = getFullFeaturedHeight()+"px"; 
      //getFullFeaturedHeight() returns the full height of the content area.
    }
    waitForFinalEvent(function(){
      console.log('>> resetting the slider...')
      $('.flexslider').resize();
    }, 500, "sliderresize");
  });
});

我的控制台日志：

Answer 1

我想您可能想在flexslider实例上而不是在jQuery元素上调用resize（）？我没有在 ages 中使用jQuery，但是我认为这会触发一个resize DOM事件，该事件冒泡到窗口。

所以代替：

waitForFinalEvent(function(){
  console.log('>> resetting the slider...')
  $('.flexslider').resize();
}, 500, "sliderresize");

尝试：

waitForFinalEvent(function(){
  console.log('>> resetting the slider...')
  headSlider.resize();
}, 500, "sliderresize");

Answer 2

循环由您创建。因为您要创建新的超时。清除一个之后。

timers[uniqueId] = setTimeout(callback, ms);

也除非您要明确地说要杀死具有指定ID的超时，否则不需要clearTimeout。超时运行一次。

如果您不想创建循环。不要创建新的超时。每当您可以调整滑块大小时，每次调整大小事件都会触发。

也不确定为什么 $('.flexslider').resize();和slider.resize(); 滑块在哪里定义？

我想您想要的是：

  $( window ).resize(function() {
      ....
      $('.flexslider').resize();
  });

使用FlexSlider和$（window）.resize（）调整浏览器大小的无限循环

2 个答案: