我有一个像这样可调整大小的 div：
div{
resize:both;
overflow:hidden;
height:10rem;
width:10rem;
border:solid 0.5rem black;
}<div id=\"item\" ></div>如何调用函数后它已完成调整大小？
ResizeObserver 与去抖动器结合使用？
mouseup，否则在调整大小时可能会触发去抖动。
标签： javascript html css
您可以只检查mouseup 事件，并跟踪旧的 v 新大小。
这里唯一的问题是除了使用鼠标之外是否还有其他方法可以调整 div 的大小。
const item = document.querySelector('#item');
function getSize() {
return {
w: item.offsetWidth,
h: item.offsetHeight
}
}
let old = getSize();
item.addEventListener('mouseup', () => {
let n = getSize();
if (old.w !== n.w && old.h !== n.h) {
console.log('resized: ' + JSON.stringify(n));
old = n;
}
});#item {
resize:both;
overflow:hidden;
height:10rem;
width:10rem;
border:solid 0.5rem black;
}
.as-console-wrapper {
max-height:50px!important;
}<div id="item" ></div>【讨论】：
resized 事件吗？不，我不相信有这样的事情。但是，您可以创建一个自定义事件来执行类似的操作，它基本上在后台使用了这种技术。您试图通过防止重复位来解决什么问题？，您将console.log 放在支票之外，您当然希望将其放在支票中。然后唯一的重复位是检查，如果这是您的目标，这实际上是零性能成本。
我将ResizeObserver 和去抖动器结合起来的意思是这样的：
const observerDebouncers = new WeakMap;
const observer = new ResizeObserver(entries => {
entries.forEach(entry => {
clearTimeout( observerDebouncers.get( entry.target ) );
observerDebouncers.set( entry.target, setTimeout(() => {
entry.target.dispatchEvent( new CustomEvent( 'resized' ) );
}, 200) );
})
});
const resizeable = document.querySelector( 'div' );
resizeable.addEventListener( 'resized', event => {
console.log( 'resized' );
});
observer.observe( resizeable );#item {
resize:both;
overflow:hidden;
height:10rem;
width:10rem;
border:solid 0.5rem black;
}<div id="item" ></div>有点崩溃：observerDebouncers 只包含一个从目标到存储的当前超时的弱映射列表。它是弱绑定的，所以如果你删除了元素，超时 id 会自动丢失。这意味着您永远不必担心这里的内存消耗变得笨拙。
observer 本身只是为它接收到的每个调整大小事件创建一个超时。它还取消了先前存储的超时。这意味着只要持续拖拽，超时就会被取消，resized 事件会延迟 200 多毫秒。如果调整大小停止，通风口将在 200 毫秒后触发。 （这就是所谓的去抖动器，它在 JS 中非常常见的逻辑来限制被触发的实际事件）。
然后你需要做的最后一件事是监听事件并将目标添加到观察者，瞧，resized 事件。
【讨论】：