在 m() 生成的元素上设置超时事件

Question

我有一个 m("p.help") 元素，它通过单击事件被删除。

我还希望元素在几秒后如果没有被点击自动删除。我需要为此设定一个超时时间。设置超时无效。

function help() {
  var text = `This is a service template. Use Service section to set the schedule`;

  var node = m("p.help", {
    onclick() {
      this.parentNode.removeChild(this);
    },
  }, text);

  setTimeout(() => {
    if (node.parentNode) {
      node.parentNode.removeChild(node);
      console.log("removed");
      m.redraw();
    }
  }, 5000);

  return node;
}

点击事件正常，但超时无效。它甚至没有被 console.log()

判断触发

我做错了什么？

编辑

感谢 ciscoheat 的提示。

我必须将计时器放入控制器才能正常工作。

所以这个很好用：

function controller(init) {
  this.display = {
    help: true
  };
  setTimeout(() => {
    this.display.help = false;
    m.redraw();
  }, 5000);
}

function view(vm) {
  return m(".container", [
    (() => {
      var text = "Some text";
      if (vm.display.help) {
        return m("p.memo", {
          onclick() {
            this.parentNode.removeChild(this);
          }
        }, text);
      }
    })(),
  ]);
}

Answer 1

要正确使用 Mithril，您应该避免 DOM 操纵，将其留给 Mithril 的快速差异算法。

改为使用状态变量，与显示将在 5 秒后自动更改的帮助段落有关。

这是一个显示我的意思的 jsbin：http://jsbin.com/kixece/edit?html,js,output

在 m() 生成的元素上设置超时事件

Set time out event on a m() generated element

javascript

mithril.js