JavaScript Polymer：如何中断/停止自定义Polymer函数

嘿，针对你在Polymer组件里想要中断自定义函数的需求，我整理了几个实用的方案，结合你给出的leegmaken函数场景来具体说明：

1. 用return语句直接终止（最常用） #

这是最简单直接的方式，只要在你想要停止函数执行的位置调用return，函数就会立刻终止，不再执行后续代码。针对你的场景，可以这样调整：

Polymer({
  is: 'serverenelement-app',
  leegmaken: function() {
    // 先判断：如果regel1已经是空的，直接终止函数
    if (!this.shadowRoot.getElementById("regel1").value.length) {
      return; // 这里直接返回，函数停止，后面的代码都不会跑了
    }

    // 原有的逻辑继续执行
    if (this.shadowRoot.getElementById("radio1").checked) {
      this.shadowRoot.getElementById("regel1").value = "";
      this.shadowRoot.getElementById("radio1").checked = false;
    }
    
    // 其他后续逻辑...
  }
});

如果需要返回特定值，也可以写return someValue;，不需要的话直接写return;就好。

2. 抛出错误（仅适用于异常场景） #

如果是遇到异常情况需要强制终止函数，可以抛出一个错误。但要注意，这个方法会向上传递错误，最好配合try/catch使用，不然会导致页面报错：

Polymer({
  is: 'serverenelement-app',
  leegmaken: function() {
    const regel1 = this.shadowRoot.getElementById("regel1");
    // 如果找不到元素，抛出错误终止函数
    if (!regel1) {
      throw new Error("leegmaken函数终止：未找到regel1元素");
    }

    // 正常逻辑...
  }
});

这种方式只适合处理异常情况，不建议用来做普通的流程控制。

3. 标志位控制（适合多步骤/异步场景） #

如果你的函数包含多个执行步骤或者异步操作（比如定时器、网络请求），可以设置一个标志变量来控制流程是否继续：

Polymer({
  is: 'serverenelement-app',
  properties: {
    isFunctionStopped: {
      type: Boolean,
      value: false
    }
  },
  leegmaken: function() {
    // 每次执行前重置标志位
    this.isFunctionStopped = false;

    // 第一步操作
    if (this.isFunctionStopped) return;
    console.log("执行第一步");

    // 模拟异步操作
    setTimeout(() => {
      // 检查标志位，如果已停止就不执行后续逻辑
      if (this.isFunctionStopped) return;
      console.log("执行异步操作");
    }, 1000);

    // 第二步操作
    if (this.isFunctionStopped) return;
    console.log("执行第二步");
  },
  // 外部调用这个方法来停止函数执行
  stopLeegmaken: function() {
    this.isFunctionStopped = true;
  }
});

这样你可以通过调用stopLeegmaken()方法，随时中断leegmaken函数里的后续步骤。

根据你的代码场景，最推荐用第一种return的方式，简单高效；如果函数涉及异步操作或者需要外部触发停止，再考虑第三种标志位的方法。

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