在 ResizeObserver 事件之后

Question

我有一个 resizeObserver (https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver ) 监控 div 大小的变化。 但是，在调整大小事件期间，我想显示 div 的边框，然后在调整大小后让它消失。

为此，我有一个 .tempBorder class 将被添加到调整大小事件中：

Css：

.tempBorder {
        border: 1px solid red;
    }

Javascript：

var chartResizer = document.getElementById('chartResizer');
    var chartResizerResizeObserver = new ResizeObserver(() => {
        chartResizer.classList.add("tempBorder");
    }
    ).observe(chartResizer);

但我无法使用chartResizer.classList.remove("tempBorder"); 因为似乎没有我能找到的在调整大小完成后触发的事件。

我知道这可能是故意的，因为在调整大小时会连续触发 after 事件，所以我想知道在其中使用setTimeOut是否是更好的解决方案？

所以像这样：

 var chartResizer = document.getElementById('chartResizer');
    var chartResizerResizeObserver = new ResizeObserver(() => {
        chartResizer.classList.add("tempBorder");
        myChart.resize();
        setTimeout(function(){
            chartResizer.classList.remove("tempBorder");
        }, 1000);
    }
    ).observe(chartResizer);

我是否必须像第二个示例那样做一些事情，或者是否有更有效的方法来通过resizeObserver的事件after实现我想要的？

Answer 1

称呼

chartResizer.classList.remove("tempBorder");

在mouseup事件上