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

Binding to window resize causing a loop when calling resize on flexslider

本文关键字：resize 调用 循环 flexslider 调整 窗口 绑定      更新时间：2023-09-26

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

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

为此，我发现：

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

我该怎么解决这个问题？

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

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

/**
  * @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')每次都会被调用。如果这个变量没有改变，它应该在函数范围之外，也许是一个参数。=>脑海中浮现出"委派"或"lambda"。

你能试一下吗，你的代码性能很差，因为即使你稍微移动一下窗口，它也会被永久调用。这可能导致您的错误。

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

我不确定这是否会立即解决你的问题，但无论如何使用它都是非常明智的，即使它不会解决你的麻烦！

相关文章：