防止窗口大小调整上的无限循环

Question

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

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返回到window对象，并触发另一个调整大小的事件。您需要确保#滑块-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)
});