ResizeObserver构造报错：textarea内HTML渲染及Ajax调用问题咨询

先解决ResizeObserver的报错问题 #

报错Failed to construct 'ResizeObserver': parameter 1 is not of type 'Function'的核心原因是你创建ResizeObserver时，第一个参数没传合法的回调函数。

• 排查渲染逻辑里的ResizeObserver初始化代码，确保写法是这样的：

  // 正确示例：第一个参数是处理尺寸变化的函数
  const observer = new ResizeObserver((entries) => {
    entries.forEach(entry => {
      // 这里写尺寸变化后的处理逻辑，比如同步textarea高度
    });
  });
  

• 检查Ajax回调中调用render时，有没有把非函数值（比如字符串、undefined）误传到ResizeObserver的参数位置。

异步场景下的渲染时机问题 #

直接定义var explain能在onload正常渲染，是因为onload时DOM已就绪、变量同步可用；但Ajax是异步操作，你大概率踩了这两个坑：

1. DOM元素未就绪：调用render时目标textarea还没被渲染到页面
2. 数据未正确赋值：render执行时explain变量还没拿到Ajax返回的结果

解决方法：
在Ajax回调里拿到数据后，先确认DOM元素存在，再调用render：

// 示例Ajax请求（用fetch或jQuery.ajax都可以）
fetch('/你的控制器接口地址')
  .then(res => res.text())
  .then(htmlData => {
    const targetTextarea = document.getElementById('你的textareaID');
    if (targetTextarea) {
      render(targetTextarea, htmlData); // 明确传入DOM元素和接口返回的HTML内容
    }
  });

关于textarea渲染HTML的注意点 #

原生textarea只能显示纯文本，如果你是通过隐藏div模拟HTML渲染（比如解析HTML后同步尺寸/内容），要确保render函数的逻辑在异步场景下没问题：

function render(textarea, htmlContent) {
  // 创建隐藏div解析HTML
  const hiddenParser = document.createElement('div');
  hiddenParser.style.cssText = 'visibility:hidden;position:absolute;white-space:pre-wrap;';
  hiddenParser.innerHTML = htmlContent;
  document.body.appendChild(hiddenParser);

  // 正确初始化ResizeObserver监听尺寸变化
  const observer = new ResizeObserver(entries => {
    // 同步div的高度到textarea
    textarea.style.height = entries[0].contentRect.height + 'px';
    // 如果要显示纯文本就用innerText，要模拟富文本可能需要其他处理
    textarea.value = hiddenParser.innerText;
  });

  observer.observe(hiddenParser);
}

最后排查变量作用域 #

检查Ajax回调里的explain变量是否存在作用域问题，比如有没有在回调内重新定义同名变量导致覆盖，确保传入render的是正确的接口返回值。

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