为什么jquery可调整大小的resize看起来很平滑，但提供一个事件大小调整的函数却不是？

Question

所以我使用了jQuery resizable，我发现使用resizable的'alsoResize‘会对我的元素产生一些不必要的影响。所以我想我只需要绑定到'resize‘事件并执行我自己的自定义操作。我不明白的是，为什么当使用noting时，效果是smooth...specifically，当滚动条进来的时候。但在“调整大小”上执行一个小操作

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

使效果起伏或缓慢。我想它并不像它那样慢..它更像是没有及时重新渲染元素……但是一旦我停止调整大小，函数就会完全生效，并且处于正确的位置。

任何关于为什么会发生这种情况的见解都将非常受欢迎。

Answer 1

我想这与resize事件触发的速度有关。当你调整某个对象的大小时，事件会不断地触发(可能会有数百次)。如果重绘效果很强烈，那么这将导致性能问题。为了解决这个问题，你应该使用setTimeout，并且每隔x毫秒执行一次重绘。只要操作不太密集，你应该能够在流畅性和性能之间找到一个令人满意的中间点。

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

var go = true;
var timeout;

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

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

Answer 2

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

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

此外，underscore.js还具有很好的油门实施