为什么 jquery resizable alsoresize 看起来很流畅，但是提供了关于 event resize 的功能却没有？答案

【问题标题】：Why does jquery resizable alsoresize look smooth but providing a function on event resize isnt?为什么 jquery resizable alsoresize 看起来很流畅，但是提供了关于 event resize 的功能却没有？
【发布时间】：2011-11-04 10:51:56
【问题描述】：

所以我使用 jQuery resizable 并且我发现使用 resizable 的 'alsoResize' 会对我的元素产生一些不良影响。因此，我认为我只需绑定到“调整大小”事件并执行我自己的自定义操作。我不明白的是为什么在使用alsoresize 时效果很平滑......特别注意滚动条何时出现。然而对“调整大小”执行一个小动作

that.box.height(that.host.Content.outerHeight() - that.header.outerHeight());

导致效果不稳定或缓慢。我想它不像它的慢......它更像是它没有及时重新渲染元素......但是一旦我停止调整大小，该功能就会完全发挥作用并且在适当的位置。

任何关于为什么会发生这种情况的见解将不胜感激。

【问题讨论】：

我发现了问题。在一个更高级别的 div 上，我使用宽度和高度作为“继承”，这减慢了它的速度……将它们更改为 100% 似乎已经解决了这个问题，尽管我无法想象为什么“继承”是那么多渲染的负担，而不是 100%；

标签： jquery jquery-plugins

【解决方案1】：

我想这与调整大小事件的触发速度有关。当您调整某些东西的大小时，事件会连续触发（可能数百次）。如果重绘效果很密集，那么这将导致性能问题。为了解决这个问题，您应该使用 setTimeout 并且仅每 x 毫秒执行一次重绘。只要操作不是太密集，您应该能够在平滑度和性能之间找到一个令人满意的平衡点。

更新 - 我决定添加一些伪代码

var go = true;
var timeout;

$(element).resize( function() {
  if (go) { 
    //your code

    //
    go = false;
    timeout = setTimeout('go = true', 100);        
  }
});

【讨论】：

【解决方案2】：

您需要做的是限制您在调整大小函数中调用的代码。这是一个很好的throttlejquery 插件：

http://code.google.com/p/jquery-debounce/

underscore.js 也有很好的油门实现

【讨论】：