1

我正在使用媒体查询调整 div 的宽度。当该 div 更改宽度时，我需要页面做出反应。

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

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

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

感谢你的协助。

- - - 编辑 - - - -

让我澄清一下我在此示例中看到的 resize 常见问题：

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

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

我一直在唱的问题是，当我单击“打开”时，框会打开然后关闭。第二次点击工作正常。

Jquery 在事件处理程序中保留了第二个调用。我无法解绑它，因为我需要再次检查大小。

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

4

2 回答 2

4

使用此处找到的技术：

JQuery：如何仅在完成调整大小后才调用 RESIZE 事件？

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");
}​

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

于 2012-11-01T03:37:38.243 回答
0

好的-根据您编辑的问题，这就是问题所在。切换功能会跟踪它为上次单击运行的功能，并将始终为下次单击运行另一个功能。因此，当您单击它一次时，它会运行第一个功能，再次单击它会运行第二个功能，然后返回第一个功能，依此类推。

但是，您的窗口调整大小事件正在折叠窗口，所以如果您最后一次单击 h1 是为了展开它，那么下一次单击，toggle 将尝试关闭它。因此，您的窗口调整大小事件将其关闭，然后按钮再次将其关闭。这就是为什么在调整窗口大小后第一次单击按钮时看不到任何结果的原因。

我修改了您的代码以不使用切换 - 而是使用状态变量：

http://jsfiddle.net/SVy6m/1/

var target;
var isCollapsed = true;

$('h1').click(function() {
    if(isCollapsed) {
        $('.box-1').slideDown();
    } else {
        $('.box-1').slideUp();   
    }
    isCollapsed = !isCollapsed;
});   


var id;
$(window).resize(function() {
    clearTimeout(id);
    id = setTimeout(doneResizing, 10);

});

function doneResizing(){
    // do something
    $('.box-1').slideUp();
    isCollapsed = true;
}    ​

您仍然需要添加一些代码来检查窗口大小是否小于 800。希望这会有所帮助！

于 2012-11-01T05:34:51.040 回答