Question

在网站上工作时请使用flexslider插件。

我想检测浏览器调整大小，然后重新启动滑块，以便调整大小/其他参数。

为此，我找到了：

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

哪个有效，但我现在已经创建了一个函数来调用它并在窗口调整大小时使用它与绑定：

$(window).bind('resize', function() {
    console.log('window resized');
    resizeSlider();
});

// resize the slider
function resizeSlider()
{
    var slider = $('.flexslider').data('flexslider');
    slider.resize();
    console.log('slider-resized');
}

问题是，当我调整浏览器大小时，我会得到一个不断调整浏览器大小的浏览器＆＃39;记录，然后是600的堆栈：

Uncaught RangeError: Maximum call stack size exceeded

我该如何解决这个问题？

Answer 1

听起来有一个我们一无所知的潜在问题。也许窗口调整大小事件会在其他地方触发？

这是我在很多项目中使用的一个小功能，每次都会帮助我。

/**
  * @description delay events with the same id, good for window resize events, keystroke, etc ...
  * @param {Function} func : callback function to be run when done
  * @param {Integer} wait : integer in milliseconds
  * @param {String} id : unique event id
  */
var delayedEvent = (function () {
    var timers = {};

    return function (func, wait, id) {
        wait = wait || 200;
        id = id || 'anonymous';
        if (timers[id]) {
            clearTimeout(timers[id]);
        }

        timers[id] = setTimeout(func, wait);
    };
})();

要应用于调整大小功能，只需将其包裹起来：

function resizeSlider() {
    delayedEvent(function() {
        var slider = $('.flexslider').data('flexslider');
        slider.resize();
        console.log('slider-resized');
    }, 200, 'flexslider-resize');
}

现在每当调用resizeSlider()时，您每200ms执行一次该函数。这应该可以防止范围错误。

要检查潜在问题，请在$(window).bind('resize')中使用它。现在我注意到了，您是否尝试$(window).on('resize')或bind这里的原因是什么？你使用较旧的jQuery版本吗？

另请注意，每次都会调用$('.flexslider').data('flexslider')。该变量应该在函数范围之外，作为参数，如果它没有改变的话。 =＆GT; ＆＃34;委托＆＃34;或＆＃34; lambda＆＃34;浮现在脑海中。

Answer 2

你能不能尝试this，你的代码性能非常差，因为即使你稍稍移动你的窗口也会永久调用它。 可能会导致您的错误。

在resize方法中添加延迟，以便客户端可以处理所有调整大小。

我不确定这是否会立即解决您的问题，但无论如何都非常建议使用它，即使它无法解决您的问题！

在flexslider

2 个答案: