ResizeObserver无resize结束事件，如何实现边框动态显隐？

ResizeObserver本身并没有专门的"resize完成"事件，它会在元素尺寸每次变化时都触发回调——这也是你找不到所谓after事件的原因。

你用setTimeout的思路方向是对的，但单纯每次触发都开定时器的问题在于：如果resize过程持续触发多次回调，会创建多个定时器，可能导致边框还没等resize结束就被提前移除，或者多次执行移除操作。更高效的方案是用**防抖（debounce）**来处理。

防抖的核心逻辑是：每次触发resize回调时，先清除之前的定时器，只保留最后一次触发的定时器，等resize停止一段时间后再执行移除边框的操作。

具体实现代码如下：

.tempBorder {
    border: 1px solid red;
}

const chartResizer = document.getElementById('chartResizer');
let resizeTimer;

const chartResizerResizeObserver = new ResizeObserver(() => {
    // 每次resize时先添加边框
    chartResizer.classList.add("tempBorder");
    myChart.resize();

    // 清除之前的定时器，避免多次触发
    clearTimeout(resizeTimer);
    // 设置新的定时器，resize停止500ms后移除边框（可根据需求调整延迟时间）
    resizeTimer = setTimeout(() => {
        chartResizer.classList.remove("tempBorder");
    }, 500);
}).observe(chartResizer);

这样调整后，只有当resize完全停止超过500ms时，才会移除边框，既保证了resize过程中边框一直显示，又不会出现不必要的重复操作，比单纯的setTimeout更高效可靠。

另外，如果你需要在页面卸载时清理资源，可以调用chartResizerResizeObserver.disconnect()来停止监听，避免内存泄漏。

内容的提问来源于stack exchange，提问作者Joe