media-queries - 使用 jQuery 检测 div 宽度变化的最佳方法是什么？

Question

我正在使用媒体查询调整 div 的宽度。我需要页面在 div 宽度改变时使用react。

我使用了 .resize，但是，它会触发两次，并在用户进一步与 div 交互时导致问题。我无法使用 .live() ，因为这需要用户进行交互才能达到所需的效果。最后，我研究了 DOMSubtreeModified ，但它已经被贬值了。

简单来说，这就是我想做的:

$('#element').watchForChange(function(){
     *...do stuff here when the change happens...*
});

感谢您的帮助。

-----编辑--------

让我用这个例子来澄清我在调整大小时遇到​​的一个常见问题:

<div id="box"></div>
<span id="button">Open</span>

在上面的示例中，假设#box为400x400并且处于“打开”状态(display:block)。当窗口大小调整到 800px 时，我希望该框关闭(显示:无)。 “打开”按钮将使用 jquery 再次打开框 ($('#button').click(function(){...});)

我一直唱的问题是当我单击“打开”时，框会打开然后关闭。第二次点击效果很好。

Jquery 正在事件处理程序中保留第二个调用。我无法解除绑定(bind)，因为我需要再次检查尺寸。

我没有使用打开关闭功能。相反，我使用 slider 上的下一个按钮。我需要在调整大小时将项目重置回开头。我可以让他们重置，没问题。问题是:第二次单击“下一步”会将其重置。

Answer 1

使用此处找到的技术:

JQuery: How to call RESIZE event only once it's FINISHED resizing?

http://jsfiddle.net/Zevan/c9UE5/1/

var id;
$('#element').resize(function() {
    clearTimeout(id);
    id = setTimeout(doneResizing, 500);

});

function doneResizing(){
    // do something
    console.log("done resizing");
}​

该事件仍会多次触发，但 didResizing 函数只会在最后一次触发后 500 毫秒被调用。当然，您可以调整该数字以满足您的需要。