如何实现非阻塞的监听数据变化并执行渲染？附C#参考实现

1. 用ES6 Proxy原生监听对象变化 #

这是最高效的方案，直接拦截对象的读写操作，无需轮询，完全非阻塞，能精准捕捉数据变更。

示例代码：

// 待监听的目标数据
const targetData = { count: 0 };

// 创建Proxy实例拦截数据操作
const dataProxy = new Proxy(targetData, {
  set(target, prop, newValue) {
    // 数据变更时触发你的业务逻辑
    if (target[prop] !== newValue) {
      console.log(`数据${prop}更新：${target[prop]} → ${newValue}`);
      autoRendering(newValue);
    }
    // 完成赋值
    target[prop] = newValue;
    return true;
  }
});

// 测试：修改数据自动触发监听
dataProxy.count = 1;
dataProxy.count = 5;

function autoRendering(value) {
  // 这里写你的渲染/操作逻辑，比如更新DOM
  document.body.innerText = `当前计数：${value}`;
}

2. 用定时器替代忙等待轮询 #

如果需要兼容不支持Proxy的旧环境，可以用setTimeout递归轮询替代忙等待，给主线程留出处理其他任务的时间。

示例代码：

let currentData = { value: 0 };
let lastDataValue = currentData.value;

// 非阻塞轮询函数
function watchData() {
  if (currentData.value !== lastDataValue) {
    autoRendering(currentData.value);
    lastDataValue = currentData.value;
  }
  // 递归调用，间隔16ms接近60帧刷新率，平衡响应速度和性能
  setTimeout(watchData, 16);
}

// 启动监听
watchData();

// 模拟数据变更
setTimeout(() => {
  currentData.value = 10;
}, 1500);

function autoRendering(value) {
  document.body.innerText = `当前值：${value}`;
}

优先用递归setTimeout而非setInterval，避免定时器堆积导致的任务重叠问题。

3. 用MutationObserver监听DOM关联变化 #

如果你的数据最终会映射到DOM节点上，可以直接监听DOM的变化，无需单独轮询数据。

示例代码：

// 目标DOM元素
const dataElement = document.getElementById('data-display');

// 创建观察者实例
const domObserver = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    if (mutation.type === 'characterData') {
      // DOM内容变化时执行操作
      console.log('DOM数据更新，触发渲染');
      // 这里写后续处理逻辑
    }
  });
});

// 配置监听选项
domObserver.observe(dataElement, {
  childList: true,
  subtree: true,
  characterData: true
});

// 测试：修改DOM触发监听
setTimeout(() => {
  dataElement.innerText = '更新后的DOM内容';
}, 1000);

关于JS和C#多线程的差异说明 #

JS是单线程模型（Web Worker除外，但Worker无法操作DOM），不能像C#那样直接开启独立线程轮询。上述方案都是利用浏览器事件循环机制，让监听逻辑在主线程的空闲时段执行，不会阻塞UI交互、用户输入等其他任务。如果需要处理大量计算型任务，可以把计算逻辑放到Web Worker中，计算完成后再通知主线程执行渲染操作。

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