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

Question

我写了一些JQuery代码来刷新我在响应式Wordpress主页上使用的FlexSlider实例。 因为它响应，所以每次调整浏览器窗口大小时滑块都需要重置。

我在docs上看到了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实例上调用resize（），而不是在jQuery元素上调用？ 我没有使用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。 因为timeOut运行一次。

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

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

我想你想要的是：

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