Question

我正在开发一个项目，要求我将幻灯片添加到以下flexslider实例

  $('.product_slider').flexslider({
    startAt: parseInt($('.featured_image', $(this)).data('index'), 10),
    touch: true,
    pauseOnHover: true,
    controlNav: "thumbnails",
    directionNav: false,
    {% if settings.product_slideshow_animation == 'none' or settings.product_slideshow_animation == 'zoom' %}
    slideshow: false,
    {% else %}
    animation: "{{ settings.product_slideshow_animation }}",
    {% endif %}
    slideshowSpeed: {% if settings.slideshow_speed != blank %}{{ settings.slideshow_speed }}{% else %}10{% endif %}*1000,
    animationSpeed: 1
  });

我使用以下代码添加幻灯片

$('.product_slider').data('flexslider').addSlide("<li>slide</li>");

这样做会给我RangeError: Maximum call stack size exceeded错误

所以我查看了flexslider库代码并找到导致此问题的代码部分，但我不确定如何解决它。

这是addSlide函数。此函数永远不会超过slider.update(pos, "add")行。

  slider.addSlide = function(obj, pos) {
      var $obj = $(obj);
      slider.count += 1;
      slider.last = slider.count - 1;
      console.log(slider.last);
      if (vertical && reverse) {
        (pos !== undefined) ? slider.slides.eq(slider.count - pos).after($obj) : slider.container.prepend($obj);
      } else {
        (pos !== undefined) ? slider.slides.eq(pos).before($obj) : slider.container.append($obj);
      }
      // update currentSlide, animatingTo, controlNav, and directionNav
      //THIS LINE
      slider.update(pos, "add");
      console.log("here-2");
      // update slider.slides
      slider.slides = $(slider.vars.selector + ':not(.clone)', slider);
      // re-setup the slider to accomdate new slide
      slider.setup();
      //FlexSlider: added() Callback
      slider.vars.added(slider);
    };

这是slider.update函数。此功能永远不会超过methods.controlNav.update("add");行。

slider.update = function(pos, action) {
  slider.doMath();

  // update currentSlide and slider.animatingTo if necessary
  if (!carousel) {
    if (pos < slider.currentSlide) {
      slider.currentSlide += 1;
    } else if (pos <= slider.currentSlide && pos !== 0) {
      slider.currentSlide -= 1;
    }
    slider.animatingTo = slider.currentSlide;
  }

  // update controlNav
  if (slider.vars.controlNav && !slider.manualControls) {
    if ((action === "add" && !carousel) || slider.pagingCount > slider.controlNav.length) {
      methods.controlNav.update("add");
    } else if ((action === "remove" && !carousel) || slider.pagingCount < slider.controlNav.length) {
      if (carousel && slider.currentSlide > slider.last) {
        slider.currentSlide -= 1;
        slider.animatingTo -= 1;
      }
      methods.controlNav.update("remove", slider.last);
    }
  }
  // update directionNav
  if (slider.vars.directionNav) { methods.directionNav.update(); }
};

最后这里是methods.controlNav.update函数

    update: function(action, pos) {
      if (slider.pagingCount > 1 && action === "add") {
        slider.controlNavScaffold.append($('<li><a href="#">' + slider.count + '</a></li>'));
      } else if (slider.pagingCount === 1) {
        slider.controlNavScaffold.find('li').remove();
      } else {
        slider.controlNav.eq(pos).closest('li').remove();
      }
      methods.controlNav.set();
      (slider.pagingCount > 1 && slider.pagingCount !== slider.controlNav.length) ? slider.update(pos, action) : methods.controlNav.active();
    }

我相信这个函数卡在最后一行的递归循环中，因为slider.pagingCount和slider.controlNav.length永远不会相等，因此它会一直调用slider.update然后调用methods.controlNav.update然后调用slider.update，这是一个永无止境的循环

使用addSlide添加幻灯片时，永远不会结束Flexslider中的递归

0 个答案: