时间戳

首页 > 解决方案 > 自定义 onChange 事件

javascript - 自定义 onChange 事件

问题描述

是否有推荐的方法来根据值的更改触发自定义事件？我有一个变量，我们称之为它status，它来自外部 API，将从queued-> in progress->更改complete。

我想观察该变量的变化并适当地触发事件。现在它的工作原理是这样的：我每 2 秒轮询一次状态，服务器响应如下所示：

<status> @ <every X seconds of polling>
queued @ 0s
queued @ 2s
queued @ 4s
in progress @ 6s
in progress @ 8s
in progress @ 10s
in progress @ 12s
in progress @ 14s
in progress @ 16s
complete @ 18s
complete @ 20s
complete @ 22s
complete @ 24 s

我正在根据此状态更改一些 DOM 元素。我想将 DOM 操作从 12 次减少到 3 次。通过维护以前的状态和当前状态变量，处理这个问题的天真的方法似乎是可行的，但我想知道这是否可以通过使用类似 CustomEvent 的东西.

标签： javascripteventsdom-events

解决方案

在过去，使用对象的 .watch() 方法可以实现这样的事情。每当属性的值发生变化时，它都会触发一个事件。不幸的是，它现在已被弃用。

虽然有点棘手，但我们可以使用MutationObserver来伪造这种行为。诀窍是，不是将您的状态更改存储在变量status中，而是将其存储在不可见的 DIV 中，并使用 MutationObserver 我们可以在 DIV 的 innerHTML 属性更改时立即触发事件。

var observer = new MutationObserver(handler),
  targetDiv = document.getElementById("dummy"),
  objConfig = {
    childList: true,
    subtree: true,
    attributes: false,
    characterData: false
  };

observer.observe(targetDiv, objConfig);

function handler() {
  console.log("something changed");
}

// the following part is just needed to simulate the change
setTimeout(changeIt, 1000);
function changeIt() {
  document.getElementById("dummy").innerHTML = "different";
}
<div id="dummy" style="display:none"></div>

推荐阅读