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

时间:2014-03-10 23:18:56

标签: jquery

通过将resize函数链接到初始化滑块对象,我能够在响应网格中很好地调整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')吗?

1 个答案:

答案 0 :(得分:3)

在Javascript中,事件冒泡了DOM。调整窗口大小时,会在滑块上触发resize事件,然后使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)
});