Question

我正在使用ResizeObserver（谷歌浏览器支持实验性网络平台标志）。我使用jQuery UI resizable创建了codepen演示。它在chrome linux上工作正常，但在Windows上它会在一段时间后停止或仅执行一次。

我的代码如下：

$('#node').css({
  width: 140,
  height: 50
}).resizable();

function resizer(node, callback) {
  if (window.ResizeObserver) {
    var resizer = new ResizeObserver(function(entries) {
      callback(entries[0]);
    });
    resizer.observe(node);
    return () => resizer.unobserve(node);
  } else {
    return () => undefined;
  }
}
resizer(document.querySelector('.content'), function(entry) {
  var width = entry.contentRect.width;
  var height = entry.contentRect.height
  console.log(width + 'x' + height);
  // custom event found on
  // https://ebidel.github.io/demos/dom_resize_events.html
  entry.target.dispatchEvent(new CustomEvent('resize', {
    detail: {width,height}
  }));
});
document.querySelector('.content').addEventListener('resize', (e) => {
  console.log(e.detail);
});

我尝试重新启动浏览器，关闭/打开开发人员工具也将文件下载到本地驱动器并使用文件协议打开并获得相同的结果。

google chrome example正常，

这是my pen

Answer 1

观察者似乎收集了垃圾，添加了

var r;
...
function resizer(node, callback) {
   ...
   var resizer = new ResizeObserver(...);
   r = resizer;
   ...
}

解决了问题

ResizeObserver在Windows上无法正常工作

1 个答案: