防止在窗口大小调整时发生无限循环

Question

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

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

然而，将$('#slider-2').resize();放在$(window).resize的匿名函数中实际上会导致无限循环;点击这里，打开控制台，调整窗口大小，看到…

如何防止这个循环?窗口没有调整大小，所以我没想到会发生这种情况。我可以排除$('#slider-2')在选择器或什么?

Answer 1

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

查看下面的代码:

$('#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)
});