jquery - 防止窗口调整大小时出现无限循环

Question

通过将 resize 函数链接到初始化 slider 对象上，我可以创建一个 flexslider元素在响应式网格中很好地调整大小。通过在窗口大小调整时运行它，我可以获得非常清晰的响应式幻灯片:

var timer;
$(window).resize(function(){
    clearTimeout(timer);
    timer = setTimeout( function(){
        console.log('resize');
        $('#slider-2').resize();
    }, 500)
});

但是，将 $('#slider-2').resize(); 放在 $(window).resize' 匿名函数中实际上会导致无限循环; click here, open the console and resize the window to see. .

如何防止这种循环？窗口没有调整大小，所以我认为不会发生这种情况。我可以在选择器或其他内容中排除 $('#slider-2') 吗？

Answer 1

在 Javascript 中，事件在 DOM 中冒泡。当您调整窗口大小时，您会触发 slider 上的调整大小事件，然后该事件会沿着 DOM 向上返回到窗口对象并触发另一次调整大小。您需要确保 #slider-2 上的调整大小事件处理程序停止传播。

查看此代码:

$('#slider-2').on('resize',function(event){
event.stopPropagation()
});

var timer;
$(window).resize(function(){
    clearTimeout(timer);
    timer = setTimeout( function(){
        console.log('resize');
        $('#slider-2').resize();
    }, 500)
});