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（）生成的元素上设置超时事件

1 个答案: