开发者问题收集

绑定到窗口调整大小会导致在 flexslider 上调用调整大小时出现循环

2015-12-18
724
javascript jquery flexslider

在网站上使用 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');
}

问题是，当我调整浏览器大小时，我得到了一个恒定的“浏览器调整大小”日志流，然后在之前的堆栈中有 600 个： 

Uncaught RangeError: Maximum call stack size exceeded

我该如何解决这个问题？

2个回答

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

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

/**
  * @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() ，您都会每 200 毫秒执行一次该函数。这应该可以防止范围错误。

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

另请注意，每次都会调用 $('.flexslider').data('flexslider') 。如果此变量不变，则应将其置于函数范围之外，或许可以将其作为参数。=> 想到了“委托”或“lambda”。

Tim Vermaelen
2015-12-18

您能否尝试执行 此操作 ，您的代码性能非常差，因为即使您稍微移动窗口，它也会永久调用。这 可能 会导致您的错误。

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

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

Clemens Himmer
2015-12-18